/* ============================================
   Utility Classes
   ============================================ */

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text colors */
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-white { color: var(--white); }
.text-muted { color: var(--gray-500); }

/* Font */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* Font sizes */
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

/* Font weight */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

/* Text transform */
.uppercase {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Responsive display */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* Width */
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Image utilities */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-rounded {
  border-radius: var(--radius-lg);
}

/* Decorative gold line */
.gold-line {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: var(--space-4) 0;
}

.gold-line--center {
  margin-left: auto;
  margin-right: auto;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but focusable */
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================
   Touch target minimums (mobile audit)
   Buttons and standalone contact links measured 20-42px tall on a 390px
   viewport. 44x44 is the minimum comfortable target, so anything tappable
   gets padded up to it on touch-sized screens.
   ============================================ */
@media (max-width: 1023px) {
  .btn,
  .filter-btn,
  .accordion__trigger,
  .testimonial-carousel__prev,
  .testimonial-carousel__next {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Phone and email links sit alone in footers and contact blocks, where a
     mis-tap costs a lead. */
  .footer__contact-item a,
  .mobile-menu__contact a,
  .contact-method a,
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Inline phone/email inside a sentence should not be forced to 44px. */
  p a[href^="tel:"],
  p a[href^="mailto:"],
  li a[href^="tel:"],
  li a[href^="mailto:"] {
    display: inline;
    min-height: 0;
  }

  .header__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Footer link lists stack vertically at 22px tall, which is an easy mis-tap
   on a phone. Space them out rather than making the text bigger. */
@media (max-width: 1023px) {
  .footer__links a {
    display: block;
    padding: 0.6rem 0;
    min-height: 44px;
    line-height: 1.6;
  }

  .footer__social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .proj-breadcrumb a {
    display: inline-block;
    padding: 0.5rem 0;
  }
}