/*
 * Daniel Collins Theme — dct-buttons.css
 * =============================================================================
 * Custom utility button classes for use on links, shortcodes, and page builder
 * elements throughout the site. All classes use the dct- prefix (Danny Collins
 * Theme) to avoid conflicts with WordPress core, plugin, and theme classes.
 *
 * USAGE PATTERN — composable class system:
 *   1. Always start with dct-btn (base — required)
 *   2. Add ONE color modifier  (e.g. dct-btn--primary)
 *   3. Add ONE size modifier   (e.g. dct-btn--sm)     — optional, default is md
 *   4. Add ONE icon modifier   (e.g. dct-btn--read-more) — optional
 *
 * EXAMPLE:
 *   <a href="/blog" class="dct-btn dct-btn--primary dct-btn--sm dct-btn--read-more">
 *     Read More
 *   </a>
 *
 * All icons use LineIcons 5.1 Free (CDN loaded in inc/enqueue.php).
 * Icons are injected via ::before pseudo-elements so no extra HTML is needed.
 *
 * @package DanielCollins
 * @version 1.0.0
 */

/* =============================================================================
   1. BASE — dct-btn
   All button links must include this class. Handles display, spacing, font,
   transition, and accessibility. Does NOT set color — that's a color modifier.
   ============================================================================= */

.dct-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--dc-space-2);
  font-family:      var(--dc-font-body);
  font-weight:      600;
  font-size:        var(--dc-text-sm);       /* 14px — default/medium size */
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  text-decoration:  none !important;         /* Override global a { text-decoration: underline } */
  line-height:      1;
  white-space:      nowrap;
  padding:          var(--dc-space-3) var(--dc-space-6);
  border-radius:    var(--dc-radius-sm);
  border:           2px solid transparent;
  cursor:           pointer;
  transition:       background-color var(--dc-transition-fast),
                    border-color var(--dc-transition-fast),
                    color var(--dc-transition-fast),
                    transform var(--dc-transition-fast);
}

.dct-btn:hover,
.dct-btn:focus {
  text-decoration: none !important;
  transform:       translateY(-1px);
}

.dct-btn:active {
  transform: translateY(0);
}

.dct-btn:focus-visible {
  outline:        3px solid var(--dc-gold);
  outline-offset: 3px;
}

/* Icon sizing — all ::before icons inherit this */
.dct-btn::before {
  font-size:   1.1em;
  line-height: 1;
  flex-shrink: 0;
}


/* =============================================================================
   2. COLOR MODIFIERS
   Apply exactly one color modifier per button.
   ============================================================================= */

/* --- Primary — solid crimson (main CTA) ----------------------------------- */
.dct-btn--primary {
  background:   var(--dc-gold);
  color:        var(--dc-white) !important;
  border-color: var(--dc-gold);
}
.dct-btn--primary:hover,
.dct-btn--primary:focus {
  background:   var(--dc-gold-light);
  border-color: var(--dc-gold-light);
  color:        var(--dc-white) !important;
}

/* --- Secondary — navy outline -------------------------------------------- */
.dct-btn--secondary {
  background:   transparent;
  color:        var(--dc-navy) !important;
  border-color: var(--dc-navy);
}
.dct-btn--secondary:hover,
.dct-btn--secondary:focus {
  background: var(--dc-navy);
  color:      var(--dc-white) !important;
}

/* --- Ghost — white outline (for use on dark backgrounds) ------------------- */
.dct-btn--ghost {
  background:   transparent;
  color:        var(--dc-white) !important;
  border-color: rgba(255, 255, 255, 0.6);
}
.dct-btn--ghost:hover,
.dct-btn--ghost:focus {
  background:   rgba(255, 255, 255, 0.12);
  border-color: var(--dc-white);
  color:        var(--dc-white) !important;
}

/* --- Navy — solid navy fill --------------------------------------------- */
.dct-btn--navy {
  background:   var(--dc-navy);
  color:        var(--dc-white) !important;
  border-color: var(--dc-navy);
}
.dct-btn--navy:hover,
.dct-btn--navy:focus {
  background:   var(--dc-navy-light);
  border-color: var(--dc-navy-light);
  color:        var(--dc-white) !important;
}

/* --- Outline Crimson — crimson outline, transparent fill ------------------ */
.dct-btn--outline {
  background:   transparent;
  color:        var(--dc-gold) !important;
  border-color: var(--dc-gold);
}
.dct-btn--outline:hover,
.dct-btn--outline:focus {
  background: var(--dc-gold);
  color:      var(--dc-white) !important;
}

/* --- Light — light gray fill (subtle, low-emphasis) ----------------------- */
.dct-btn--light {
  background:   var(--dc-light);
  color:        var(--dc-navy) !important;
  border-color: var(--dc-border);
}
.dct-btn--light:hover,
.dct-btn--light:focus {
  border-color: var(--dc-gold);
  color:        var(--dc-gold) !important;
  background:   var(--dc-light);
}

/* --- Text — no background, no border (inline link-like) ------------------- */
.dct-btn--text {
  background:   transparent;
  color:        var(--dc-gold) !important;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.dct-btn--text:hover,
.dct-btn--text:focus {
  color:     var(--dc-navy) !important;
  transform: translateX(2px) translateY(0); /* Slide right instead of lift */
}


/* =============================================================================
   3. SIZE MODIFIERS
   Apply at most one size modifier. Default (no size class) = medium.
   ============================================================================= */

/* Extra Small */
.dct-btn--xs {
  font-size: var(--dc-text-xs);     /* 12px */
  padding:   var(--dc-space-1) var(--dc-space-3);
  letter-spacing: 0.04em;
}

/* Small */
.dct-btn--sm {
  font-size: var(--dc-text-xs);     /* 12px */
  padding:   var(--dc-space-2) var(--dc-space-4);
}

/* Medium — default, no modifier needed */

/* Large */
.dct-btn--lg {
  font-size: var(--dc-text-base);   /* 16px */
  padding:   var(--dc-space-4) var(--dc-space-8);
}

/* Full width — stretches to container */
.dct-btn--full {
  width:           100%;
  justify-content: center;
}


/* =============================================================================
   4. ICON MODIFIERS — LineIcons 5.1 Free
   Each icon class injects a LineIcon via ::before.
   Icons sit left of text automatically via the gap in .dct-btn base.
   To flip icon to right side, use dct-btn--icon-right which moves it to ::after.
   ============================================================================= */

/* --- Content & Blog -------------------------------------------------------- */
.dct-btn--read-more::before    { font-family: "LineIcons"; content: "\eb9e"; } /* lni-book-open */
.dct-btn--learn-more::before   { font-family: "LineIcons"; content: "\ea0c"; } /* lni-information */
.dct-btn--view-all::before     { font-family: "LineIcons"; content: "\eb17"; } /* lni-grid-alt */
.dct-btn--blog::before         { font-family: "LineIcons"; content: "\eb26"; } /* lni-pencil-alt */

/* --- Actions --------------------------------------------------------------- */
.dct-btn--book::before         { font-family: "LineIcons"; content: "\ea53"; } /* lni-calendar */
.dct-btn--contact::before      { font-family: "LineIcons"; content: "\ea5b"; } /* lni-envelope */
.dct-btn--download::before     { font-family: "LineIcons"; content: "\ea60"; } /* lni-download */
.dct-btn--share::before        { font-family: "LineIcons"; content: "\eba4"; } /* lni-share */
.dct-btn--play::before         { font-family: "LineIcons"; content: "\eb72"; } /* lni-play */
.dct-btn--watch::before        { font-family: "LineIcons"; content: "\ebe9"; } /* lni-youtube */
.dct-btn--listen::before       { font-family: "LineIcons"; content: "\eb4f"; } /* lni-microphone */
.dct-btn--search::before       { font-family: "LineIcons"; content: "\eb85"; } /* lni-search */

/* --- Navigation ------------------------------------------------------------ */
.dct-btn--arrow-right::after   { font-family: "LineIcons"; content: "\ea27"; display:inline; font-size:1.1em; margin-left: var(--dc-space-2); } /* lni-arrow-right */
.dct-btn--back::before         { font-family: "LineIcons"; content: "\ea24"; } /* lni-arrow-left */
.dct-btn--external::after      { font-family: "LineIcons"; content: "\eabd"; display:inline; font-size:1em; margin-left: var(--dc-space-1); } /* lni-exit */

/* --- Social / Media -------------------------------------------------------- */
.dct-btn--podcast::before      { font-family: "LineIcons"; content: "\eb4f"; } /* lni-microphone */
.dct-btn--speaking::before     { font-family: "LineIcons"; content: "\eb4f"; } /* lni-microphone */
.dct-btn--media::before        { font-family: "LineIcons"; content: "\eb09"; } /* lni-film-strip */
.dct-btn--linkedin::before     { font-family: "LineIcons"; content: "\eaec"; } /* lni-linkedin-original */
.dct-btn--instagram::before    { font-family: "LineIcons"; content: "\eae2"; } /* lni-instagram-original */

/* --- Utility --------------------------------------------------------------- */
.dct-btn--print::before        { font-family: "LineIcons"; content: "\eb77"; } /* lni-printer */
.dct-btn--map::before          { font-family: "LineIcons"; content: "\eb02"; } /* lni-map-marker */
.dct-btn--user::before         { font-family: "LineIcons"; content: "\ebe3"; } /* lni-user */
.dct-btn--book-speaker::before { font-family: "LineIcons"; content: "\ea53"; } /* lni-calendar — alias for booking */


/* =============================================================================
   5. SPECIAL VARIANTS
   Pre-composed shortcuts for the most common button combinations.
   These supplement (not replace) the composable system.
   ============================================================================= */

/* Read More — crimson primary with book icon, inline text size */
.dct-readmore {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--dc-space-2);
  font-family:     var(--dc-font-body);
  font-weight:     600;
  font-size:       var(--dc-text-sm);
  color:           var(--dc-gold);
  text-decoration: none;
  letter-spacing:  0.03em;
  transition:      color var(--dc-transition-fast), gap var(--dc-transition-fast);
}
.dct-readmore::before {
  font-family: "LineIcons";
  content:     "\ea27"; /* lni-arrow-right */
  font-size:   0.95em;
}
.dct-readmore:hover,
.dct-readmore:focus {
  color: var(--dc-navy);
  gap:   var(--dc-space-3); /* Arrow nudges right on hover */
  text-decoration: none;
}

/* Book Danny — primary CTA, always prominent */
.dct-book-cta {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--dc-space-2);
  background:     var(--dc-gold);
  color:          var(--dc-white);
  border:         2px solid var(--dc-gold);
  border-radius:  var(--dc-radius-sm);
  padding:        var(--dc-space-4) var(--dc-space-8);
  font-family:    var(--dc-font-body);
  font-weight:    600;
  font-size:      var(--dc-text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition:     background var(--dc-transition-fast), border-color var(--dc-transition-fast), transform var(--dc-transition-fast);
}
.dct-book-cta::before {
  font-family: "LineIcons";
  content:     "\ea53"; /* lni-calendar */
  font-size:   1.1em;
}
.dct-book-cta:hover,
.dct-book-cta:focus {
  background:   var(--dc-gold-light);
  border-color: var(--dc-gold-light);
  color:        var(--dc-white);
  transform:    translateY(-1px);
  text-decoration: none;
}


/* =============================================================================
   6. RESPONSIVE
   Full-width buttons on mobile when inside .dct-btn-group or .wp-block-buttons
   ============================================================================= */

@media screen and (max-width: 639px) {
  .dct-btn-group .dct-btn {
    width:           100%;
    justify-content: center;
  }
}