/* ============================================================================
   Conrad Legal Office — newconradlegaloffice.com
   File: assets/css/components.css
   Purpose: Reusable UI button components (6 variants: 3 primary, 3 secondary)
   Depends on: tokens.css (must be imported first via the line below)
   ============================================================================ */

@import url('./tokens.css');


/* ============================================================================
   BASE BUTTON
   Shared foundation applied to every .btn element.
   Fluid padding clamp range: 400px (25rem) → 1920px (120rem)
   ============================================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;

  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  font-weight:     var(--fw-regular);
  line-height:     1;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  text-decoration: none;
  white-space:     nowrap;

  border-radius:   6px;
  cursor:          pointer;
  transition:      background-color 0.2s ease,
                   border-color     0.2s ease,
                   color            0.2s ease,
                   transform        0.15s ease;
}

/* Hover magnify — subtle scale-up */
.btn:hover {
  transform: scale(1.03);
}

/* Press feedback — subtle scale-down on click */
.btn:active {
  transform: scale(0.97);
}

/* Icon sizing inside any button (covers both inline SVG and Lucide-generated SVG) */
.btn svg,
.btn img,
.btn [data-lucide] {
  width:        var(--icon-size-sm);
  height:       var(--icon-size-sm);
  flex-shrink:  0;
  stroke-width: var(--icon-stroke);
  transition:   stroke-width 0.2s ease;
}

/* Bolder phone icon on hover — thicker stroke gives a near-filled look */
.btn:hover svg,
.btn:hover [data-lucide] {
  stroke-width: 3;
}

/* Keyboard focus ring — visible for all button variants */
.btn:focus-visible {
  outline:        3px solid var(--color-red-light);
  outline-offset: 3px;
}

/* ── Loading state ─────────────────────────────────────────────────────── */
/* Replaces the icon with a spinning ring; disables hover/click feedback. */
.btn.is-loading {
  cursor:        wait;
  pointer-events: none;
}

.btn.is-loading:hover,
.btn.is-loading:active {
  transform: none;
}

/* Hide the icon while loading */
.btn.is-loading svg,
.btn.is-loading [data-lucide] {
  display: none;
}

/* Spinner — currentColor ring with one transparent quadrant, rotating */
.btn.is-loading::before {
  content:       '';
  width:         var(--icon-size-sm);
  height:        var(--icon-size-sm);
  border:        2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex-shrink:   0;
  animation:     btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Reduced motion — replace spin with a steady pulse */
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before {
    animation: btn-pulse 1.4s ease-in-out infinite;
  }
  @keyframes btn-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }
}

/* ── Custom phone icon (cross-fade between off → on) ─────────────────── */
/* Two pseudo-elements layered: ::before = phone-off, ::after = phone-on. */
/* Hover cross-fades opacity for a smooth transition.                      */
.icon-phone {
  width:       var(--icon-size-sm);
  height:      var(--icon-size-sm);
  flex-shrink: 0;
  display:     inline-block;
  position:    relative;
}

.icon-phone::before,
.icon-phone::after {
  content:                '';
  position:               absolute;
  inset:                  0;
  background-color:       currentColor;
  -webkit-mask-size:      contain;
          mask-size:      contain;
  -webkit-mask-repeat:    no-repeat;
          mask-repeat:    no-repeat;
  -webkit-mask-position:  center;
          mask-position:  center;
  transition:             opacity 0.3s ease;
}

.icon-phone::before {
  -webkit-mask-image: url('../images/Icons/phone-off.svg');
          mask-image: url('../images/Icons/phone-off.svg');
  opacity: 1;
}

.icon-phone::after {
  -webkit-mask-image: url('../images/Icons/phone-on.svg');
          mask-image: url('../images/Icons/phone-on.svg');
  opacity: 0;
}

.btn:hover .icon-phone::before,
.btn:focus-visible .icon-phone::before {
  opacity: 0;
}

.btn:hover .icon-phone::after,
.btn:focus-visible .icon-phone::after {
  opacity: 1;
}


/* ============================================================================
   PRIMARY BUTTONS
   Target at 1920px: max-height 65px · max horizontal padding 40px
   Fluid padding-block:  clamp(0.625rem, 0.461rem + 0.658vw, 1.25rem)
   Fluid padding-inline: clamp(1.25rem,  0.921rem + 1.316vw, 2.5rem)
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. btn-primary-navy-bordered-red
      bg: --color-blue-electric · border: --color-red-dark
      Example label: "VIEW MORE CASE STUDIES"
   -------------------------------------------------------------------------- */

.btn-primary-navy-bordered-red {
  padding:          clamp(0.4rem, 0.259rem + 0.566vw, 0.9375rem)
                    clamp(1.25rem,  0.921rem + 1.316vw, 2.5rem);
  background-color: var(--color-blue-electric);
  border:           1px solid var(--color-red-dark);
  color:            var(--color-white);
  font-weight:      var(--fw-bold);
}

.btn-primary-navy-bordered-red:hover,
.btn-primary-navy-bordered-red:focus-visible {
  background-color: var(--color-blue-dark);
  border-color:     var(--color-red);
}


/* --------------------------------------------------------------------------
   2. btn-primary-red
      bg: --color-red-dark · border: --color-red-light
      Example label: "START YOUR CASE NOW"
   -------------------------------------------------------------------------- */

.btn-primary-red {
  padding:          clamp(0.4rem, 0.259rem + 0.566vw, 0.9375rem)
                    clamp(1.25rem,  0.921rem + 1.316vw, 2.5rem);
  background-color: var(--color-red-dark);
  border:           1px solid var(--color-red-light);
  color:            var(--color-white);
  font-weight:      var(--fw-bold);
}

.btn-primary-red:hover,
.btn-primary-red:focus-visible {
  background-color: var(--color-red);
  border-color:     var(--color-red-light);
}


/* --------------------------------------------------------------------------
   3. btn-primary-navy
      bg: --color-blue-electric · border: --color-blue-darkest
      Example label: "VIEW ALL AREAS"
   -------------------------------------------------------------------------- */

.btn-primary-navy {
  padding:          clamp(0.4rem, 0.259rem + 0.566vw, 0.9375rem)
                    clamp(1.25rem,  0.921rem + 1.316vw, 2.5rem);
  background-color: var(--color-blue-electric);
  border:           1px solid var(--color-blue-darkest);
  color:            var(--color-white);
  font-weight:      var(--fw-bold);
}

.btn-primary-navy:hover,
.btn-primary-navy:focus-visible {
  background-color: var(--color-blue-light);
  border-color:     var(--color-blue);
}


/* ============================================================================
   SECONDARY BUTTONS
   Target at 1920px: max-height 53px · max horizontal padding 17px
   Fluid padding-block:  clamp(0.4rem,   0.259rem + 0.566vw, 0.9375rem)
   Fluid padding-inline: clamp(0.625rem, 0.510rem + 0.461vw, 1.0625rem)
   ============================================================================ */

/* --------------------------------------------------------------------------
   4. btn-secondary-transparent-bordered-red
      bg: --color-red · border: --color-red · with phone icon
      Example label: "(877) 364-6210"
   -------------------------------------------------------------------------- */

.btn-secondary-transparent-bordered-red {
  padding:          clamp(0.4rem,   0.259rem + 0.566vw, 0.9375rem)
                    clamp(0.625rem, 0.510rem + 0.461vw, 1.0625rem);
  background-color: transparent;
  border:           1.5px solid var(--color-red);
  color:            var(--color-red);
  font-weight:      var(--fw-bold);
  letter-spacing:   0;
}

.btn-secondary-transparent-bordered-red:hover,
.btn-secondary-transparent-bordered-red:focus-visible {
  background-color: var(--color-red-dark);
  border-color:     var(--color-red-dark);
  color:            var(--color-white);
  font-weight:      var(--fw-bold);
}


/* --------------------------------------------------------------------------
   5. btn-secondary-navy-bordered-red
      bg: --color-blue-electric · border: --color-red-dark · with phone icon
      Example label: "(877) 364-6210"
   -------------------------------------------------------------------------- */

.btn-secondary-navy-bordered-red {
  padding:          clamp(0.4rem,   0.259rem + 0.566vw, 0.9375rem)
                    clamp(0.625rem, 0.510rem + 0.461vw, 1.0625rem);
  background-color: var(--color-blue-electric);
  border:           1px solid var(--color-red-dark);
  color:            var(--color-white);
  font-weight:      var(--fw-bold);
  letter-spacing:   0;
}

.btn-secondary-navy-bordered-red:hover,
.btn-secondary-navy-bordered-red:focus-visible {
  background-color: var(--color-blue-dark);
  border-color:     var(--color-red);
  font-weight:      var(--fw-bold);
}



/* --------------------------------------------------------------------------
   6. btn-secondary
      bg: --color-red · border: --color-red · no icon
      Example label: "LEARN MORE"
   -------------------------------------------------------------------------- */

.btn-secondary {
  padding:          clamp(0.4rem,   0.259rem + 0.566vw, 0.9375rem)
                    clamp(0.625rem, 0.510rem + 0.461vw, 1.0625rem);
  background-color: transparent;
  border:           1px solid var(--color-red);
  color:            var(--color-red);
  font-weight:      var(--fw-bold);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-red-dark);
  border-color:     var(--color-red-dark);
  font-weight:      var(--fw-bold);
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 99999;
  padding: 0.75rem 1.25rem;
  background: var(--color-blue-electric);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid var(--color-red-light);
  outline-offset: 2px;
}