/*
 * BWP Brand Theme
 * Updated: 2025-11-12
 * Brand Colors: Deep Purple (#6B2D8F), Mint Green (#4ECDC4), Deep Navy (#1A1F3A)
 */

/* ============================================
   BRAND COLOR SYSTEM - PURPLE THEME
   ============================================ */

:root {
  /* ============================================
     NEW PURPLE THEME COLORS
     ============================================ */
  
  /* Primary Brand Colors */
  --color-hero-blue: #0056FF;         /* Royal Blue - Hero section background */
  --color-hero-blue-hover: #0044CC;   /* Darker blue for hover states */
  --color-primary: #6B2D8F;           /* Deep Purple - CTAs, secondary sections */
  --color-primary-hover: #5a2577;     /* Darker purple for hover states */
  --color-primary-light: #8B3AA7;     /* Vibrant Purple */
  
  /* Secondary Colors */
  --color-secondary: #1A1F3A;         /* Deep Navy - Dark sections, body text */
  --color-secondary-light: #2d3456;   /* Lighter navy for hover states */
  
  /* Accent Colors */
  --color-accent: #4ECDC4;            /* Mint Green - Buttons, hover states */
  --color-accent-hover: #3db8ae;      /* Darker mint for hover */
  --color-accent-secondary: #FFB84D;  /* Amber Gold - Highlights, warnings */
  
  /* Research Tool Card Gradients */
  --gradient-pink-blue: linear-gradient(135deg, #FF6B9D 0%, #00D4FF 100%);
  --gradient-green-cyan: linear-gradient(135deg, #00FF88 0%, #00D4FF 100%);
  --gradient-orange-purple: linear-gradient(135deg, #FFA500 0%, #C77DFF 100%);
  --gradient-purple-pink: linear-gradient(135deg, #9D4EDD 0%, #FF6B9D 100%);
  --gradient-yellow-orange: linear-gradient(135deg, #FFD60A 0%, #FF6B00 100%);
  --gradient-blue-cyan: linear-gradient(135deg, #0096FF 0%, #00D4FF 100%);
  
  /* Background Colors */
  --color-bg-primary: #FFFFFF;        /* White - Main backgrounds */
  --color-bg-secondary: #E8DFF5;      /* Soft Lavender - Alternating sections */
  --color-bg-dark: #1A1F3A;           /* Deep Navy - Dark sections */
  --color-bg-charcoal: #2C2C2C;       /* Dark gray - Alternative dark bg */
  
  /* Text Colors */
  --color-text-primary: #1A1F3A;      /* Deep Navy - Body text */
  --color-text-secondary: #6B2D8F;    /* Deep Purple - Headings */
  --color-text-light: #FFFFFF;        /* White - Text on dark backgrounds */
  --color-text-muted: #757575;        /* Gray - Secondary text */
  
  /* ============================================
     LEGACY COLORS (Backward Compatibility)
     ============================================ */
  
  /* Legacy BWP Red variables - aliased to purple theme */
  --bwp-red: var(--color-primary);
  --bwp-red-dark: var(--color-primary-hover);
  --bwp-red-light: var(--color-primary-light);
  --bwp-charcoal: var(--color-bg-charcoal);
  --bwp-charcoal-light: #6B6B6B;
  --bwp-white: #FFFFFF;
  --bwp-off-white: #F5F5F5;
  
  /* Supporting Grays */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  
  /* Semantic Colors */
  --success: #4CAF50;
  --warning: var(--color-accent-secondary);  /* Using Amber Gold */
  --error: #F44336;
  --info: #2196F3;
  
  /* Legacy Semantic Aliases */
  --primary-color: var(--color-primary);
  --primary-color-dark: var(--color-primary-hover);
  --primary-color-light: var(--color-primary-light);
  --secondary-color: var(--color-secondary);
  --secondary-color-light: var(--color-secondary-light);
  --accent-color: var(--color-accent);
  --background-color: var(--color-bg-primary);
  --text-color: var(--color-text-primary);
  
  /* Typography */
  --font-heading: Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-size-base: 18px; /* Updated to 18px for BWP-style readability (16px on mobile via media query) */
  --line-height-base: 1.6;
  
  /* Legacy font aliases */
  --heading-font: var(--font-heading);
  --body-font: var(--font-body);
  
  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Standardized Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
}

/* ============================================
   SMOOTH SCROLL BEHAVIOR
   ============================================ */

/* Enable smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Hero split layout utilities for above-the-fold blocking */
.hero-split {
  display: block; /* container for the normal-flow grid inside */
  position: relative;
  /* keep the section flush with the top of the page; the grid will
     apply padding-top equal to the header height so content sits below it */
  margin-top: 0;
}
.hero-left {
  background-color: var(--color-hero-blue) !important;
  color: var(--color-text-light);
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
}
.hero-left .hero-content {
  max-width: 48rem;
}
/* hero-graphic removed: decorative SVG handled inline or removed */

/* Responsive: stack on narrower viewports */
@media (max-width: 1024px) {
  .hero-left {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}

/* New normal-flow hero grid used inside the foreground container */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 40%;
  align-items: center;
  min-height: 420px; /* match reference screenshot height */
  /* ensure the grid content is visible below the fixed header */
  padding-top: 88px;
}

.hero-right {
  overflow: hidden;
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduce hero height on narrower viewports */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 360px;
    padding-top: 72px;
  }
  .hero-right {
    order: 0;
  }
}

@media (max-width: 767px) {
  .hero-grid {
    min-height: 260px;
    padding-top: 72px;
  }
}

/* Background split for hero to allow left/right color halves */
.hero-bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.hero-bg .hero-bg-left,
.hero-bg .hero-bg-right {
  flex: 1 1 50%;
  height: 100%;
}
.hero-bg .hero-bg-left {
  background: var(--color-primary);
}
.hero-bg .hero-bg-right {
  background: var(--color-secondary);
}

/* Foreground content should sit above the background */
.hero-foreground {
  position: relative;
  z-index: 10;
}

/* Remove any default top gap */
.hero-split,
.hero-split .hero-left,
.hero-split .hero-graphic {
  margin-top: 0;
  padding-top: 0;
}

/* Note: header offset for hero-grid is handled via .hero-split margin-top and
   .hero-grid padding-top earlier so the grid element itself begins at the
   top of the page while content remains visible below the fixed header. */


/* ============================================
   BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  color: var(--bwp-charcoal);
  background-color: var(--bwp-white);
  line-height: var(--line-height-base);
  font-size: var(--font-size-base);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--bwp-charcoal);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

a {
  color: var(--bwp-red);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--bwp-red-dark);
  text-decoration: underline;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container-wide {
  max-width: 1400px;
}

.container-narrow {
  max-width: 800px;
}

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

.bg-bwp-red {
  background-color: var(--bwp-red);
  color: var(--bwp-white);
}

.bg-bwp-red-dark {
  background-color: var(--bwp-red-dark);
  color: var(--bwp-white);
}

.bg-bwp-charcoal {
  background-color: var(--bwp-charcoal);
  color: var(--bwp-white);
}

.bg-bwp-white {
  background-color: var(--bwp-white);
  color: var(--bwp-charcoal);
}

.bg-gray-light {
  background-color: var(--gray-100);
}

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

.text-bwp-red {
  color: var(--bwp-red);
}

.text-bwp-charcoal {
  color: var(--bwp-charcoal);
}

.text-white {
  color: var(--bwp-white);
}

.text-gray {
  color: var(--gray-600);
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Hero Section */
.hero-section {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background-color: var(--bwp-red);
  color: var(--bwp-white);
  position: relative;
  overflow: hidden;
}

.hero-section h1 {
  color: var(--bwp-white);
  margin-bottom: var(--space-md);
}

.hero-section p {
  font-size: 1.25rem;
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Navigation */
.navigation {
  background: var(--bwp-white);
  box-shadow: var(--shadow-sm);
  padding: var(--space-sm) var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--bwp-red);
}

/* Cards */
.card-component {
  background: var(--bwp-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card-component:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Buttons */
.button-primary {
  background-color: var(--bwp-red);
  color: var(--bwp-white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
  text-align: center;
}

.button-primary:hover {
  background-color: var(--bwp-red-dark);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--bwp-white);
}

.button-secondary {
  background-color: var(--bwp-charcoal);
  color: var(--bwp-white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.button-secondary:hover {
  background-color: var(--bwp-charcoal-light);
  text-decoration: none;
  color: var(--bwp-white);
}

.button-outline {
  background-color: transparent;
  color: var(--bwp-red);
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--bwp-red);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.button-outline:hover {
  background-color: var(--bwp-red);
  color: var(--bwp-white);
  text-decoration: none;
}

/* Service Cards */
.service-card {
  background: var(--bwp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-base);
  border: 1px solid var(--gray-200);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--bwp-red);
}

.service-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
}

/* FAQ Accordion */
.faq-accordion {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--gray-200);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--bwp-white);
  border: none;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bwp-charcoal);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  background-color: var(--gray-50);
}

.faq-question[aria-expanded="true"] {
  background: var(--color-soft-lavender, hsl(267 52% 92%));
  color: var(--bwp-charcoal);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.faq-answer {
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  overflow: hidden;
  transition: height var(--transition-base);
}

/* When expanded, visually merge question + answer into one card */
.faq-question[aria-expanded="true"] + .faq-answer {
  background: var(--color-soft-lavender, hsl(267 52% 92%));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: 0;
  padding: var(--space-md) var(--space-lg);
}

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

@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  .hero-section {
    padding: var(--space-xl) var(--space-md);
  }
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

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

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

/* Flexbox */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Rounded Corners */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }