/*
 * BWP Service Pages Stylesheet
 * Purpose: Styles for individual service detail pages
 * Updated: 2025-10-18
 */

/* ============================================
   SERVICE PAGE HERO WITH TRANSPARENT HEADER OVERLAY
   ============================================ */

/* Allow the header to overlap the hero on service pages while keeping the
   header logo visible. We remove the body offset (so the hero can sit at
   the top of the viewport) and make the header background transparent so
   the hero artwork is visible underneath. */
body.service-hero-active {
  padding-top: 0 !important;
}

/* Keep header visible but allow it to sit on top of the hero. */
body.service-hero-active .header {
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.3s, box-shadow 0.3s;
}

/* Make header solid when scrolled past hero */
body.service-hero-active .header.header-solid {
  background: var(--primary-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.service-hero {
  background-color: var(--bwp-red);
  color: var(--bwp-white);
  padding: var(--space-2xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.service-hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.service-hero h1 {
  color: var(--bwp-white);
  font-size: 3.5rem;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.service-hero .tagline {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: var(--space-lg);
  opacity: 0.95;
}

.service-hero .description {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  opacity: 0.9;
}

/* ============================================
   SERVICE OVERVIEW SECTION
   ============================================ */

.service-overview {
  background-color: var(--bwp-white);
  padding: var(--space-2xl) var(--space-lg);
}

.service-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: 1200px;
  margin: 0 auto;
}

.overview-block h2 {
  color: var(--bwp-red);
  font-size: 2rem;
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: var(--space-sm);
}

.overview-block h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--bwp-red);
}

.overview-block p {
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1.8;
}

/* ============================================
   DELIVERABLES/CAPABILITIES SECTION
   ============================================ */

.service-deliverables {
  background-color: var(--gray-100);
  padding: var(--space-2xl) var(--space-lg);
}

.deliverables-container {
  max-width: 1200px;
  margin: 0 auto;
}

.deliverables-container h2 {
  text-align: center;
  color: var(--bwp-charcoal);
  font-size: 2.5rem;
  margin-bottom: var(--space-xl);
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.deliverable-item {
  background: var(--bwp-white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.deliverable-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.deliverable-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  color: var(--bwp-red);
}

.deliverable-item h3 {
  color: var(--bwp-charcoal);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.deliverable-item p {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ============================================
   SERVICE ITEMS (NESTED LIST)
   ============================================ */

.service-items-section {
  background-color: var(--bwp-white);
  padding: var(--space-2xl) var(--space-lg);
}

.service-items-container {
  max-width: 1000px;
  margin: 0 auto;
}

.service-items-container h2 {
  text-align: center;
  color: var(--bwp-charcoal);
  font-size: 2.5rem;
  margin-bottom: var(--space-xl);
}

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

.service-item {
  background: var(--gray-50);
  border-left: 4px solid var(--bwp-red);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.service-item:hover {
  background: var(--bwp-white);
  box-shadow: var(--shadow-md);
  transform: translateX(8px);
}

.service-item h3 {
  color: var(--bwp-red);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.service-item p {
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ============================================
   PROCESS/APPROACH SECTION
   ============================================ */

.service-process {
  background-color: var(--bwp-charcoal);
  color: var(--bwp-white);
  padding: var(--space-2xl) var(--space-lg);
}

.process-container {
  max-width: 1200px;
  margin: 0 auto;
}

.process-container h2 {
  text-align: center;
  color: var(--bwp-white);
  font-size: 2.5rem;
  margin-bottom: var(--space-xl);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.process-step {
  text-align: center;
  padding: var(--space-lg);
  position: relative;
}

.process-step::before {
  content: attr(data-step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--bwp-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bwp-white);
  line-height: 48px;
}

.process-step h3 {
  color: var(--bwp-white);
  margin-top: 60px;
  margin-bottom: var(--space-sm);
  font-size: 1.25rem;
}

.process-step p {
  color: var(--gray-300);
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================
   RELATED WORK/CASE STUDIES
   ============================================ */

.related-work {
  background-color: var(--gray-100);
  padding: var(--space-2xl) var(--space-lg);
}

.related-work-container {
  max-width: 1200px;
  margin: 0 auto;
}

.related-work-container h2 {
  text-align: center;
  color: var(--bwp-charcoal);
  font-size: 2.5rem;
  margin-bottom: var(--space-xl);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.work-card {
  background: var(--bwp-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.work-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.work-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.work-content {
  padding: var(--space-lg);
}

.work-content h3 {
  color: var(--bwp-charcoal);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.work-content p {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.work-link {
  color: var(--bwp-red);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.work-link:hover {
  color: var(--bwp-red-dark);
}

/* ============================================
   CTA SECTION
   ============================================ */

.service-cta {
  background-color: var(--bwp-red);
  color: var(--bwp-white);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.service-cta h2 {
  color: var(--bwp-white);
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.service-cta p {
  font-size: 1.25rem;
  margin-bottom: var(--space-xl);
  opacity: 0.95;
}

.cta-button {
  display: inline-block;
  background-color: var(--bwp-white);
  color: var(--bwp-red);
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  color: var(--bwp-red-dark);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .service-overview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  .deliverables-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .service-hero h1 {
    font-size: 2.5rem;
  }
  
  .service-hero .tagline {
    font-size: 1.25rem;
  }
  
  .service-hero .description {
    font-size: 1rem;
  }
  
  .service-overview,
  .service-deliverables,
  .service-items-section,
  .service-process,
  .service-faqs,
  .related-work,
  .service-cta {
    padding: var(--space-xl) var(--space-md);
  }
  
  .deliverables-container h2,
  .service-items-container h2,
  .process-container h2,
  .related-work-container h2,
  .service-cta h2 {
    font-size: 2rem;
  }

  .overview-block h2 {
    font-size: 1.5rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .service-hero h1 {
    font-size: 2rem;
  }
  
  .service-item h3 {
    font-size: 1.25rem;
  }
  
  .deliverable-item h3 {
    font-size: 1.125rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .service-hero,
  .service-cta {
    background-color: transparent;
    color: var(--bwp-charcoal);
  }
  
  .service-hero h1,
  .service-cta h2 {
    color: var(--bwp-charcoal);
  }

  .service-item,
  .deliverable-item,
  .work-card {
    box-shadow: none;
    border: 1px solid var(--gray-300);
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
.cta-button:focus-visible,
.work-link:focus-visible {
  outline: 3px solid #CC1E2C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .service-item:hover,
  .deliverable-item:hover,
  .work-card:hover {
    transform: none;
  }
  
  .faq-question,
  .faq-chevron,
  .faq-answer,
  .post-faq-button {
    transition: none;
  }
  
  .faq-answer[hidden] {
    display: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .service-hero,
  .service-process,
  .service-cta {
    border: 2px solid currentColor;
  }
  
  .faq-question {
    border: 2px solid currentColor;
  }
  
  .faq-item {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .post-faq-button {
    border: 2px solid #CC1E2C;
  }
}