/**
 * Custom Utility Classes for Soil Physics Lab Website
 * Consolidates inline styles into reusable classes
 * Created: 2025-11-05
 */

/* ====================
   CARD COMPONENTS
   ==================== */

.card-img-padded {
  padding: 4px;
}

.card-full-width {
  width: 100%;
}

/* ====================
   TYPOGRAPHY
   ==================== */

/* Font Sizes */
.text-xs { font-size: small; }
.text-small { font-size: 9pt; }
.text-medium { font-size: 13pt; }
.text-sm-em { font-size: 0.9em; }

/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }

/* Text Transform & Style */
.text-no-transform { text-transform: none; }
.text-normal-style { font-style: normal; }
.text-spaced { letter-spacing: 2px; }

/* Text Alignment */
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* ====================
   COLORS
   ==================== */

/* Text Colors */
.text-dark-gray { color: #333333; }
.text-brand-blue { color: #002856; } /* UC Merced Navy */
.text-light-gray { color: #999999; }
.text-black { color: #000000; }
.text-medium-gray { color: #666666; }

/* Background Colors */
.bg-light-gray { background: #f5f5f5; }
.bg-off-white { background: #ffffff; }

/* ====================
   BORDERS
   ==================== */

.border-light { border: 1px solid #e4e4e4; }

.border-top-brand {
  border-top: 1px solid #DAA900;  /* UC Merced Dark Gold */
  padding-top: 20px;
}

.border-top-accent {
  border-top: 0.5px solid #F9CE06;
}

.border-top-light {
  border-top: solid 1px #e4e4e4;
}

.border-white-thick {
  border: solid 5px #fff;
}

/* ====================
   FLEXBOX LAYOUTS
   ==================== */

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

/* ====================
   CARD HOVER EFFECTS
   ==================== */

.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.15) !important;
}

/* ====================
   LISTS
   ==================== */

.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-square {
  list-style-type: square;
}

.list-inline-clean {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ====================
   DIMENSIONS
   ==================== */

/* Heights */
.height-member-intro { height: 170px; }
.height-profile-intro { height: 130px; }
.height-full { height: 100%; }

/* Widths */
.width-header-narrow { width: 240px; }
.width-header-wide { width: 300px; }
.width-full { width: 100%; }

/* ====================
   SPACING UTILITIES
   ==================== */

.mb-1 { margin-bottom: 4px; }
.m-0 { margin: 0; }
.my-3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.p-2 { padding: 10px; }
.pl-2 { padding-left: 10px; }

/* ====================
   SPECIALIZED
   ==================== */

.pre-wrap {
  white-space: pre-wrap;
}

/* ====================
   SECTION HEADERS
   ==================== */

.section-title {
  font-weight: 300;
  letter-spacing: 2px;
}

.section-tagline {
  font-weight: 600;
}

/* ====================
   NAVIGATION
   ==================== */

.nav-dropdown-item {
  text-transform: none;
  font-weight: 400;
}

/* ====================
   CARD VARIATIONS
   ==================== */

.card-member {
  background: #fff;
}

.card-shadow-border {
  width: 100%;
}

/* ====================
   HOVER STATES
   ==================== */

.link-light-gray {
  color: #999999;
}

.link-light-gray:hover {
  color: #000000;
}

/* ====================
   RESPONSIVE IFRAMES
   ==================== */

.iframe-responsive {
  border: none;
  max-width: 100%;
  max-height: 100vh;
}

/* ====================
   STAR RATINGS (for Podcast)
   ==================== */

.star-rating-container {
  display: flex;
  justify-content: center;
}

.star-rating {
  font-size: 18px;
  color: #aaa; /* Color for empty stars */
}

.star-rating .filled {
  color: gold; /* Color for filled stars */
}

/* ====================
   BUTTON STATES
   ==================== */

/* Active publication tab - Navy background with white text */
.btn-outline-dark.active {
  background-color: #002856 !important; /* UC Merced Navy */
  color: #FFFFFF !important; /* White text */
  border-color: #002856 !important;
  font-weight: 600;
}

.btn-outline-dark.active:hover {
  background-color: #001f42 !important; /* Darker navy on hover */
  border-color: #001f42 !important;
  color: #FFFFFF !important; /* White text */
}