/*
 * Consolidated Component Styles - Bootstrap-First Approach
 * Contains ALL reusable component styles from theme files (no duplicates)
 * Extends Bootstrap 5.3.6 with brand-specific components only
 *
 * CONSOLIDATED FROM:
 * - professional-blog-theme.css (blog components, forms, badges)
 * - grayscale-theme.css (buttons, forms, navigation)
 *
 * Generated: 2025-09-21
 */

/* Import consolidated design system and utilities */
@import url('design-system.css');
@import url('consolidated-utilities.css');

/* ==========================================================================
 * MISSING TEXT COLOR CLASSES (Fix for hero section visibility)
 * ========================================================================== */

.text-dark-custom {
   color: #212529 !important; /* Dark text for light backgrounds */
}

.text-muted-custom {
   color: #6c757d !important; /* Muted gray for secondary text */
}

.letter-spacing-tight {
   letter-spacing: -0.025em;
}

.line-height-relaxed {
   line-height: 1.7;
}

/* ==========================================================================
 * FORM COMPONENTS (consolidated from both themes)
 * ========================================================================== */

.tll-form-group {
   margin-bottom: 1.5rem;
}

.tll-form-label {
   font-weight: 600;
   color: var(--tll-primary-navy);
   margin-bottom: 0.5rem;
   display: block;
}

.tll-form-control {
   border: 2px solid var(--tll-gray-300);
   border-radius: var(--tll-border-radius-sm);
   padding: 0.75rem 1rem;
   font-size: 1rem;
   transition: all 0.2s ease;
   background: white;
}

.tll-form-control:focus {
   border-color: var(--tll-accent-blue);
   box-shadow: 0 0 0 3px rgb(43, 108, 176, 0.1);
   outline: none;
}

.tll-form-control.is-invalid {
   border-color: var(--tll-danger);
}

.tll-form-control.is-valid {
   border-color: var(--tll-success);
}

.tll-form-select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
   padding-right: 2.5rem;
}

/* ==========================================================================
 * BADGE COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-badge {
   font-size: 0.8rem;
   font-weight: 600;
   padding: 0.5rem 1rem;
   border-radius: var(--tll-border-radius-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.tll-badge-primary {
   background: var(--tll-primary-navy);
   color: white;
}

.tll-badge-success {
   background: var(--tll-success);
   color: white;
}

.tll-badge-warning {
   background: var(--tll-warning);
   color: white;
}

.tll-badge-secondary {
   background: var(--tll-gray-500);
   color: white;
}

.tll-badge-outline {
   background: transparent;
   border: 2px solid var(--tll-gray-400);
   color: var(--tll-gray-700);
}

/* ==========================================================================
 * BLOG COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-blog-card {
   background: white;
   border: 1px solid var(--tll-gray-200);
   border-radius: var(--tll-border-radius);
   overflow: hidden;
   transition: all 0.3s ease;
   height: 100%;
}

.tll-blog-card:hover {
   box-shadow: var(--tll-shadow-xl);
   transform: translateY(-4px);
}

.tll-blog-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
   background: var(--tll-gray-100);
}

.tll-blog-content {
   padding: 1.5rem;
}

.tll-blog-title {
   font-family: var(--tll-font-serif);
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--tll-primary-navy);
   margin-bottom: 0.75rem;
   line-height: 1.3;
}

.tll-blog-title:hover {
   color: var(--tll-accent-blue);
}

.tll-blog-excerpt {
   color: var(--tll-gray-600);
   font-size: 0.95rem;
   line-height: 1.6;
   margin-bottom: 1rem;
}

.tll-blog-meta {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.875rem;
   color: var(--tll-gray-500);
   margin-bottom: 1rem;
}

.tll-blog-author {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.tll-blog-date {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.tll-blog-category {
   display: inline-block;
   background: var(--tll-accent-gold);
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: var(--tll-border-radius-sm);
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

/* ==========================================================================
 * GRAYSCALE BUTTON VARIANTS (from grayscale-theme.css)
 * ========================================================================== */

.tll-btn-outline {
   background-color: transparent;
   color: var(--tll-gray-800);
   border-color: var(--tll-gray-300);
}

.tll-btn-outline:hover {
   background-color: var(--tll-gray-800);
   color: var(--tll-white);
   box-shadow: var(--tll-shadow-md);
}

/* ==========================================================================
 * NAVIGATION COMPONENTS (from grayscale-theme.css)
 * ========================================================================== */

.tll-nav-link {
   color: var(--tll-gray-700);
   font-weight: 500;
   text-decoration: none;
   padding: 0.75rem 1rem;
   border-radius: var(--tll-border-radius-sm);
   transition: all 0.3s ease;
}

.tll-nav-link:hover {
   color: var(--tll-gray-900);
   background-color: var(--tll-gray-100);
}

.tll-nav-link.active {
   color: var(--tll-gray-900);
   background-color: var(--tll-gray-200);
   font-weight: 600;
}

/* ==========================================================================
 * HERO COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-hero {
   background: linear-gradient(135deg, var(--tll-primary-navy) 0%, var(--tll-accent-blue) 100%);
   color: white;
   padding: 4rem 2rem;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.tll-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>');
   background-size: 50px 50px;
   opacity: 0.1;
}

.tll-hero-content {
   position: relative;
   z-index: 1;
}

.tll-hero-title {
   font-family: var(--tll-font-serif);
   font-size: 3rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   line-height: 1.2;
}

.tll-hero-subtitle {
   font-size: 1.25rem;
   margin-bottom: 2rem;
   opacity: 0.9;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.tll-hero-cta {
   display: inline-flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
}

/* ==========================================================================
 * STATS COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-stats {
   background: var(--tll-gray-50);
   padding: 3rem 2rem;
}

.tll-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
}

.tll-stats-card {
   background: white;
   padding: 2rem;
   border-radius: var(--tll-border-radius);
   box-shadow: var(--tll-shadow-md);
   text-align: center;
   transition: all 0.3s ease;
}

.tll-stats-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--tll-shadow-xl);
}

.tll-stats-number {
   font-family: var(--tll-font-serif);
   font-size: 3rem;
   font-weight: 700;
   color: var(--tll-primary-navy);
   margin-bottom: 0.5rem;
}

.tll-stats-label {
   font-size: 1.1rem;
   color: var(--tll-gray-600);
   font-weight: 500;
}

/* ==========================================================================
 * TESTIMONIAL COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-testimonial {
   background: white;
   padding: 2rem;
   border-radius: var(--tll-border-radius);
   box-shadow: var(--tll-shadow-md);
   margin-bottom: 2rem;
}

.tll-testimonial-quote {
   font-family: var(--tll-font-serif);
   font-size: 1.2rem;
   font-style: italic;
   color: var(--tll-gray-700);
   margin-bottom: 1.5rem;
   position: relative;
}

.tll-testimonial-quote::before {
   content: '"';
   font-size: 4rem;
   color: var(--tll-accent-gold);
   position: absolute;
   top: -20px;
   left: -20px;
   font-family: Georgia, serif;
}

.tll-testimonial-author {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.tll-testimonial-avatar {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   object-fit: cover;
}

.tll-testimonial-info h4 {
   margin: 0;
   color: var(--tll-primary-navy);
   font-weight: 600;
}

.tll-testimonial-info p {
   margin: 0.25rem 0 0;
   color: var(--tll-gray-600);
   font-size: 0.9rem;
}

/* ==========================================================================
 * FOOTER COMPONENTS (from professional-blog-theme.css)
 * ========================================================================== */

.tll-footer {
   background: var(--tll-gray-900);
   color: white;
   padding: 3rem 2rem 1rem;
}

.tll-footer-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto 2rem;
}

.tll-footer-section h3 {
   color: white;
   margin-bottom: 1rem;
   font-weight: 600;
}

.tll-footer-section p {
   color: var(--tll-gray-300);
   line-height: 1.6;
   margin-bottom: 1rem;
}

.tll-footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.tll-footer-links li {
   margin-bottom: 0.5rem;
}

.tll-footer-links a {
   color: var(--tll-gray-300);
   text-decoration: none;
   transition: color 0.3s ease;
}

.tll-footer-links a:hover {
   color: white;
}

.tll-footer-bottom {
   border-top: 1px solid var(--tll-gray-700);
   padding-top: 1rem;
   text-align: center;
   color: var(--tll-gray-400);
   font-size: 0.9rem;
}

/* ==========================================================================
 * RESPONSIVE DESIGN (from both themes)
 * ========================================================================== */

@media (max-width: 768px) {
   .tll-hero-title {
      font-size: 2rem;
   }

   .tll-blog-content {
      padding: 1rem;
   }

   .tll-stats-card {
      padding: 1.5rem;
   }

   .tll-btn {
      padding: 0.5rem 1rem;
   }

   .tll-btn-lg {
      padding: 0.75rem 1.5rem;
   }
}

@media (max-width: 576px) {
   .tll-hero {
      padding: 2rem 1rem;
   }

   .tll-stats-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   .tll-footer-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}