/* ═══════════════════════════════════════════════════════════════════════════
   Buttons — reusable button system (custom CSS, dropped in via Divi Code modules)

   Usage (Divi → Code module):
     Underline:  <a href="…" class="btn-line btn-line-full btn-line-navy">About Us <span class="et-pb-icon">&#x24;</span></a>
                 <a href="…" class="btn-line btn-line-yellow">Nationwide <span class="et-pb-icon">&#x24;</span></a>
     Filled:     <a href="…" class="btn btn-yellow">Request an Appointment</a>
                 <a href="…" class="btn btn-white">Call Us at 202.618.8850</a>

   Arrow = Divi's ETmodules icon font (glyph &#x24; = arrow_right). No Font Awesome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Underline buttons — italic subhead-md, trailing arrow, 1rem gap ───────── */
.btn-line {
  display: inline-flex; /* width: auto by default (e.g. Nationwide) */
  align-items: center;
  justify-content: center;
  gap: 1rem; /* space between text and arrow */
  padding: 0 4px 0.75rem;
  text-align: center;
  /* subheading-md type, baked in */
  font-family: var(--font-ivyora-display);
  font-size: var(--text-sub-md);
  font-style: italic;
  line-height: normal;
  letter-spacing: 0.2em;
  border-bottom: 1px solid currentColor;
  transition: transform 0.25s ease;
}
.btn-line-full {
  display: flex;
  width: 100%;
  justify-content: space-between; /* text left, arrow right */
} /* spans whole width (e.g. About Us) */
.btn-line:hover {
  transform: translateY(-4px);
}

/* trailing ETmodules arrow — override Divi's default .et-pb-icon 96px sizing */
.btn-line .et-pb-icon {
  font-size: 1em;
  line-height: 1;
}

/* colour variants — text vs accent (icon + underline) can differ */
.btn-line-navy {
  color: var(--navy);
  border-bottom-color: var(--medium-green);
}
.btn-line-navy .et-pb-icon {
  color: var(--navy);
}

.btn-line-yellow {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.btn-line-yellow .et-pb-icon {
  color: var(--yellow);
}

/* ── Filled buttons — solid block CTA, italic subhead-lg, navy text ───────── */
.btn {
  display: inline-block;
  padding: 0.75rem 2rem; /* default — general CTA size */
  text-align: center;
  color: var(--navy);
  /* subheading-lg type, baked in */
  font-family: var(--font-ivyora-display);
  font-size: var(--text-sub-lg);
  font-style: italic;
  line-height: normal;
  letter-spacing: 0.15em;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.btn-hero {
  padding: 1.5rem 1.5rem;
} /* hero + header — bigger padding */
.btn-full {
  display: block;
  width: 100%;
} /* spans whole width */
.btn-yellow {
  background-color: var(--yellow) !important;
}
.btn-light-blue {
  background-color: var(--light-blue);
}
.btn-white {
  background-color: var(--white) !important;
}

/* hover — brand-green fill + light text (shared by all filled variants) */
.btn-yellow:hover,
.btn-white:hover {
  background-color: var(--medium-green) !important;
  color: var(--white);
}

/* opt in text wrap*/
.btn-wrap {
	white-space: normal;
	text-align: center;
}