/* ═══════════════════════════════════════════════════════════════════════════
   Under The Banyan — Reusable UI Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── "Learn More" CTA — shared foundation ──────────────────────────────── */
/*
  Usage (wrapper + link):

  <div class="lm-cta">
    <a href="page.html" class="lm lm--internal">Learn more</a>          ← Type 1
    <a href="https://…" class="lm lm--external" target="_blank">…</a>   ← Type 2
    <a href="file.pdf"  class="lm lm--pdf" download>…</a>              ← Type 3
  </div>

  The extra-dots image is auto-injected via ::before on .lm-cta.
  Place .lm-cta wherever you need a CTA block.
*/

.lm-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;           /* dots sit 10px above link via padding-bottom on pseudo-el */
}

/* Extra-dots image — injected automatically above every Learn More link */
.lm-cta::before {
  content: '';
  display: block;
  width: 50px;
  height: 15px;
  background-image: url('https://underthebanyan.co/img/utb-design-element-extra-dots.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-bottom: 10px;            /* 10px gap from dots to text */
}

/* ── Base link style shared across all types ── */
.lm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5D8AA6;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm:hover {
  color: #534631;
}

/* ── Icon container — sits AFTER the text ── */
.lm .lm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.35s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPE 1 — Internal page link  →
   Arrow slides right on hover.
   ───────────────────────────────────────────────────────────────────────── */
.lm--internal .lm-icon {
  font-size: 1.1em;
}

.lm--internal:hover .lm-icon {
  transform: translateX(5px);
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPE 2 — External link  ↗
   Diagonal arrow lifts up-right on hover.
   ───────────────────────────────────────────────────────────────────────── */
.lm--external .lm-icon {
  font-size: 1em;
}

.lm--external:hover .lm-icon {
  transform: translate(4px, -4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPE 3 — PDF download  ⬇
   Download icon nudges down on hover (like falling into a tray).
   ───────────────────────────────────────────────────────────────────────── */
.lm--pdf .lm-icon {
  font-size: 1em;
}

.lm--pdf:hover .lm-icon {
  transform: translateY(3px);
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPE 4 — (Reserved, TBD)
   ───────────────────────────────────────────────────────────────────────── */
.lm--tbd .lm-icon {
  font-size: 1em;
}

/* ─────────────────────────────────────────────────────────────────────────
   INLINE SVG ICONS (embedded via JS helper — see below)
   Use these SVG strings directly inside .lm-icon spans.
   ───────────────────────────────────────────────────────────────────────── */

/*
  Icons reference (copy into your HTML as needed):

  TYPE 1 → (Right arrow)
  <span class="lm-icon">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>

  TYPE 2 ↗ (External / diagonal arrow)
  <span class="lm-icon">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>

  TYPE 3 ⬇ (PDF download)
  <span class="lm-icon">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 3V11M8 11L5 8M8 11L11 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M3 13H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </span>
*/

/* ─────────────────────────────────────────────────────────────────────────
   Sleek Toast Notification
   ───────────────────────────────────────────────────────────────────────── */
.utb-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ffffff;
    color: var(--color-dark);
    padding: 1.2rem 2rem;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 9999;
    font-family: var(--font-secondary);
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    border-left: 4px solid var(--color-primary);
}

.utb-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.utb-toast.error {
    border-left-color: #E74C3C;
}

@media(max-width: 768px) {
    .utb-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
        justify-content: center;
        text-align: center;
    }
}