/**
 * ITNJ Commission Frontend Styles - Unified
 * 
 * Consolidated CSS for all frontend commission and testimony displays
 * Based on default commission template styling with formal elements preserved
 *
 * @package ITNJ_Commission
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties - Unified Design System
   ========================================================================== */

:root {
  /* ITNJ Brand Colors */
  --itnj-primary: #1e3a8a;           /* Navy blue - matches commission theme */
  --itnj-primary-light: #3b82f6;     /* Lighter blue */
  --itnj-primary-dark: #1e40af;      /* Darker blue */
  
  /* Secondary Colors */
  --itnj-secondary: #64748b;         /* Slate gray */
  --itnj-accent: #dc2626;            /* Red for emphasis */
  --itnj-success: #059669;           /* Green */
  --itnj-warning: #d97706;           /* Orange */
  
  /* Neutral Colors */
  --itnj-text-primary: #1f2937;      /* Dark text */
  --itnj-text-secondary: #6b7280;    /* Medium gray */
  --itnj-text-muted: #9ca3af;        /* Light gray */
  --itnj-text-inverse: #ffffff;      /* White text */
  
  /* Background Colors */
  --itnj-background: #f9f9f9;        /* Light background panels */
  --itnj-background-primary: #ffffff;    /* White surface for cards */  
  --itnj-background-secondary: #f9f9f9;  /* Light gray panels */
  --itnj-background-light: #f9fafb;      /* Very light background */
  --itnj-surface: #ffffff;           /* White surface */
  --itnj-border: #e5e7eb;            /* Light border */
  --itnj-border-color: #e1e1e1;      /* Border color for cards */
  --itnj-border-strong: #d1d5db;     /* Strong border */
  
  /* Typography */
  --itnj-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --itnj-font-serif: Georgia, 'Times New Roman', Times, serif;
  
  /* Spacing */
  --itnj-space-1: 0.25rem;   /* 4px */
  --itnj-space-2: 0.5rem;    /* 8px */
  --itnj-space-3: 0.75rem;   /* 12px */
  --itnj-space-4: 1rem;      /* 16px */
  --itnj-space-5: 1.25rem;   /* 20px */
  --itnj-space-6: 1.5rem;    /* 24px */
  --itnj-space-8: 2rem;      /* 32px */
  --itnj-space-10: 2.5rem;   /* 40px */
  --itnj-space-12: 3rem;     /* 48px */
  --itnj-space-16: 4rem;     /* 64px */
  
  /* Border Radius */
  --itnj-radius: 0.25rem;     /* 4px */
  --itnj-radius-md: 0.375rem; /* 6px */
  --itnj-radius-lg: 0.5rem;   /* 8px */
  --itnj-radius-xl: 0.75rem;  /* 12px */
  --itnj-border-radius: 0.5rem;    /* 8px - main border radius */
  --itnj-border-radius-sm: 0.25rem; /* 4px - small border radius */
  
  /* Shadows */
  --itnj-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --itnj-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
  --itnj-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --itnj-shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.15);
  --itnj-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --itnj-transition: 0.2s ease;
  --itnj-transition-slow: 0.3s ease;
}

/* ==========================================================================
   Universal Heading System - Admin Customizable
   ========================================================================== */

/* Base heading styles - applies to all h1-h6 elements within plugin content */
.itnj-commission-shortcode h1,
.itnj-commission-shortcode h2,
.itnj-commission-shortcode h3,
.itnj-commission-shortcode h4,
.itnj-commission-shortcode h5,
.itnj-commission-shortcode h6,
.commission-content h1,
.commission-content h2,
.commission-content h3,
.commission-content h4,
.commission-content h5,
.commission-content h6,
.testimony-content h1,
.testimony-content h2,
.testimony-content h3,
.testimony-content h4,
.testimony-content h5,
.testimony-content h6,
.commissioner-content h1,
.commissioner-content h2,
.commissioner-content h3,
.commissioner-content h4,
.commissioner-content h5,
.commissioner-content h6,
h1.itnj-heading,
h2.itnj-heading,
h3.itnj-heading,
h4.itnj-heading,
h5.itnj-heading,
h6.itnj-heading {
    font-family: var(--itnj-heading-font-family, var(--itnj-font-primary));
    font-weight: var(--itnj-heading-font-weight, 600);
    line-height: var(--itnj-heading-line-height, 1.2);
    color: var(--itnj-heading-color, var(--itnj-text-primary));
    margin-top: 0;
    margin-bottom: var(--itnj-space-4, 1rem);
}


/* Individual heading sizes - uses admin-generated scale */
.itnj-commission-shortcode h1,
.commission-content h1,
.testimony-content h1,
.commissioner-content h1,
h1.itnj-heading {
    font-size: var(--itnj-h1-size, 2.5rem);
    margin-bottom: var(--itnj-space-6, 1.5rem);
}

.itnj-commission-shortcode h2,
.commission-content h2,
.testimony-content h2,
.commissioner-content h2,
h2.itnj-heading {
    font-size: var(--itnj-h2-size, 2rem);
    margin-bottom: var(--itnj-space-5, 1.25rem);
}

.itnj-commission-shortcode h3,
.commission-content h3,
.testimony-content h3,
.commissioner-content h3,
h3.itnj-heading {
    font-size: var(--itnj-h3-size, 1.6rem);
    margin-bottom: var(--itnj-space-4, 1rem);
}

.itnj-commission-shortcode h4,
.commission-content h4,
.testimony-content h4,
.commissioner-content h4,
h4.itnj-heading {
    font-size: var(--itnj-h4-size, 1.25rem);
    margin-bottom: var(--itnj-space-4, 1rem);
}

.itnj-commission-shortcode h5,
.commission-content h5,
.testimony-content h5,
.commissioner-content h5,
h5.itnj-heading {
    font-size: var(--itnj-h5-size, 1.125rem);
    margin-bottom: var(--itnj-space-3, 0.75rem);
}

.itnj-commission-shortcode h6,
.commission-content h6,
.testimony-content h6,
.commissioner-content h6,
h6.itnj-heading {
    font-size: var(--itnj-h6-size, 1rem);
    margin-bottom: var(--itnj-space-3, 0.75rem);
}




/* Terms of Reference Section */
.commission-terms {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 8px;
    padding: var(--itnj-space-6);
    margin-bottom: var(--itnj-space-8);
}

.commission-terms h3 {
    font-family: var(--itnj-font-serif) !important;
    font-size: 1.5rem;
    font-weight: 500;
/*    color: var(--itnj-text-primary); */
    color: var(--itnj-heading-color);
    margin-bottom: var(--itnj-space-4);
    border-bottom: 3px solid var(--itnj-accent);
    padding-bottom: var(--itnj-space-2);
}


div.terms-content {
	max-height: 500px;
	overflow: auto;
}
.terms-content {
    color: var(--itnj-text-secondary);
    font-size: 1rem;
}

.terms-content h1 {
    color: var(--itnj-heading-color);
    font-size: 1.4rem;
}

.terms-content h2 {
    color: var(--itnj-heading-color);
    font-size: 1.3rem;
}

.terms-content h3, .terms-content h4 {
    color: var(--itnj-heading-color);
    font-size: 1.2rem;
}





/* Responsive heading sizes for mobile */
@media (max-width: 768px) {
    .itnj-commission-shortcode h1,
    .commission-content h1,
    .testimony-content h1,
    .commissioner-content h1,
    h1.itnj-heading {
        font-size: var(--itnj-h1-size-mobile, 2.125rem);
    }
    
    .itnj-commission-shortcode h2,
    .commission-content h2,
    .testimony-content h2,
    .commissioner-content h2,
    h2.itnj-heading {
        font-size: var(--itnj-h2-size-mobile, 1.7rem);
    }
    
    .itnj-commission-shortcode h3,
    .commission-content h3,
    .testimony-content h3,
    .commissioner-content h3,
    h3.itnj-heading {
        font-size: var(--itnj-h3-size-mobile, 1.36rem);
    }
    
    .itnj-commission-shortcode h4,
    .commission-content h4,
    .testimony-content h4,
    .commissioner-content h4,
    h4.itnj-heading {
        font-size: var(--itnj-h4-size-mobile, 1.13rem);
    }
    
    .itnj-commission-shortcode h5,
    .commission-content h5,
    .testimony-content h5,
    .commissioner-content h5,
    h5.itnj-heading {
        font-size: var(--itnj-h5-size-mobile, 1.02rem);
    }
    
    .itnj-commission-shortcode h6,
    .commission-content h6,
    .testimony-content h6,
    .commissioner-content h6,
    h6.itnj-heading {
        font-size: var(--itnj-h6-size-mobile, 0.9rem);
    }
}

.single-commission #main, .single-commissioner #main, .commissioners-list #main , .post-type-archive-testimony #main {
    padding: 20px 0 50px 0 !important;
}

/* ==========================================================================
   Base Shortcode Styles (Preserved from existing)
   ========================================================================== */

.itnj-commission-shortcode {
    margin: 1rem 0;
    clear: both;
}

.itnj-commission-shortcode:empty {
    display: none;
}

/* ==========================================================================
   Commission & Testimony Common Styles 
   ========================================================================== */

/* Commission Summary - Based on existing pattern */
.itnj-commission-summary {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-radius-lg);
    padding: var(--itnj-space-6);
    margin-bottom: var(--itnj-space-6);
    box-shadow: var(--itnj-shadow);
    transition: box-shadow var(--itnj-transition);
}

.itnj-commission-summary:hover {
    box-shadow: var(--itnj-shadow-md);
}

/* ==========================================================================
   Testimony Template Styles - Consistent with Commission Pages
   ========================================================================== */

/* Base Testimony Container */
.itnj-testimony-template {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--itnj-space-10) var(--itnj-space-5);
    font-family: var(--itnj-font-primary);
    color: var(--itnj-text-primary);
    background: var(--itnj-background);
    line-height: 1.6;
}

/* Entry Header - Match commission styling exactly */
.testimony-single .testimony-header.entry-header,
.testimony-single .entry-header {
    background: var(--itnj-surface);
    padding: var(--itnj-space-8);
    border-radius: var(--itnj-radius-xl);
    box-shadow: var(--itnj-shadow);
    border: 1px solid var(--itnj-border);
    margin-bottom: var(--itnj-space-8);
}

.testimony-single .entry-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--itnj-primary);
    margin-bottom: var(--itnj-space-4);
    line-height: 1.2;
}

.testimony-subheading {
    font-size: 1.2rem;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-6);
    font-style: italic;
}

/* Testimony Meta - Match commission meta styling */
.testimony-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--itnj-space-4);
    margin-top: var(--itnj-space-6);
}

.testimony-meta .commission-title {
    font-size: 1.1rem;
    margin-bottom: var(--itnj-space-4);
}

.testimony-meta .meta-label {
    font-weight: 600;
    color: var(--itnj-text-secondary);
    margin-right: var(--itnj-space-2);
}

.testimony-meta .meta-link {
    color: var(--itnj-primary);
    text-decoration: none;
    transition: color var(--itnj-transition);
}

.testimony-meta .meta-link:hover {
    color: var(--itnj-primary-light);
    text-decoration: underline;
}

.testimony-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-space-4);
    align-items: center;
    margin-top: var(--itnj-space-4);
}

/* Status and Type Badges - Match commission styling */
.type-badge,
.status-badge {
    display: inline-block;
    padding: var(--itnj-space-1) var(--itnj-space-3);
    border-radius: var(--itnj-radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.type-badge.type-oral { background: #dbeafe; color: #1e40af; }
.type-badge.type-written { background: #f3e8ff; color: #7c3aed; }
.type-badge.type-exhibit { background: #fef3c7; color: #d97706; }
.type-badge.type-expert { background: #d1fae5; color: #059669; }

.status-badge.status-scheduled { background: #fef3c7; color: #d97706; }
.status-badge.status-in-progress { background: #dbeafe; color: #1e40af; }
.status-badge.status-completed { background: #d1fae5; color: #059669; }
.status-badge.status-published { background: #dcfdf7; color: #047857; }
.status-badge.status-cancelled { background: #fee2e2; color: #dc2626; }

/* Topics Section - Match commission styling */
.testimony-topics {
    background: var(--itnj-surface);
    padding: var(--itnj-space-6);
    border-radius: var(--itnj-radius-lg);
    box-shadow: var(--itnj-shadow);
    border: 1px solid var(--itnj-border);
    margin-bottom: var(--itnj-space-6);
}

.testimony-topics h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-4);
}

.topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-space-2);
}

.topic-badge {
    background: var(--itnj-primary);
    color: var(--itnj-text-inverse);
    padding: var(--itnj-space-2) var(--itnj-space-4);
    border-radius: var(--itnj-radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--itnj-transition);
}

.topic-badge:hover {
    background: var(--itnj-primary-light);
}

/* Entry Content Sections */
.testimony-single .entry-content {
    background: var(--itnj-surface);
    padding: var(--itnj-space-8);
    border-radius: var(--itnj-radius-xl);
    box-shadow: var(--itnj-shadow);
    border: 1px solid var(--itnj-border);
}

.testimony-single .entry-content section {
    margin-bottom: var(--itnj-space-8);
}

.testimony-single .entry-content section:last-child {
    margin-bottom: 0;
}

.testimony-single .entry-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-4);
    padding-bottom: var(--itnj-space-2);
    border-bottom: 2px solid var(--itnj-primary);
}

/* Testimony Content */
.testimony-content .testimony-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--itnj-text-primary);
}

/* Witness Information */
.witness-information .witness-details {
    padding: var(--itnj-space-4);
    background: var(--itnj-background);
    border-radius: var(--itnj-radius-lg);
    border-left: 4px solid var(--itnj-primary);
}

.witness-information .witness-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-2);
}

.witness-information .witness-bio {
    color: var(--itnj-text-secondary);
    line-height: 1.6;
}

/* Document Styles - Enhanced */
.testimony-documents .documents-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--itnj-space-4);
}

.testimony-documents .document-item {
    background: var(--itnj-surface);
    padding: var(--itnj-space-4);
    border-radius: var(--itnj-radius-lg);
    border: 1px solid var(--itnj-border);
    border-left: 4px solid var(--itnj-accent);
    transition: all var(--itnj-transition);
}

.testimony-documents .document-item:hover {
    box-shadow: var(--itnj-shadow-md);
    transform: translateY(-2px);
}

.testimony-documents .document-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-2);
}

.document-type-badge {
    display: inline-block;
    padding: var(--itnj-space-1) var(--itnj-space-2);
    border-radius: var(--itnj-radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--itnj-space-2);
}

.document-type-badge.type-statement { background: #dbeafe; color: #1e40af; }
.document-type-badge.type-evidence { background: #fef3c7; color: #d97706; }
.document-type-badge.type-exhibit { background: #f3e8ff; color: #7c3aed; }
.document-type-badge.type-reference { background: #f0f9ff; color: #0369a1; }

.document-description {
    color: var(--itnj-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--itnj-space-3);
}

.document-link {
    display: inline-block;
    background: var(--itnj-primary);
    color: var(--itnj-text-inverse);
    padding: var(--itnj-space-2) var(--itnj-space-4);
    border-radius: var(--itnj-radius);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--itnj-transition);
}

.document-link:hover {
    background: var(--itnj-primary-light);
    color: var(--itnj-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--itnj-shadow);
}

/* Responsive Design */
@media (max-width: 768px) {
    .itnj-testimony-template {
        padding: var(--itnj-space-6) var(--itnj-space-4);
    }
    
    .testimony-single .testimony-header.entry-header,
    .testimony-single .entry-header {
        padding: var(--itnj-space-6);
    }
    
    .testimony-single .entry-title {
        font-size: 2rem;
    }
    
    .testimony-details {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .testimony-documents .documents-list {
        grid-template-columns: 1fr;
    }
}
}

.commission-header {
    margin-bottom: var(--itnj-space-4);
    padding-bottom: var(--itnj-space-3);
    border-bottom: 1px solid var(--itnj-border);
}

.commission-title {
    margin: 0 0 var(--itnj-space-2) 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.commission-title a {
    color: var(--itnj-text-primary);
    text-decoration: none;
    transition: color var(--itnj-transition);
}

.commission-title a:hover {
    color: var(--itnj-primary);
}

/* Commission Status Badges - Preserved existing colors */
.commission-status {
    display: inline-block;
    padding: var(--itnj-space-1) var(--itnj-space-3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.commission-status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.commission-status-active { background: #d4edda; color: #155724; border: 1px solid #00b894; }
.commission-status-suspended { background: #f8d7da; color: #721c24; border: 1px solid #e74c3c; }
.commission-status-concluded { background: #d1ecf1; color: #0c5460; border: 1px solid #74b9ff; }
.commission-status-archived { background: #e2e3e5; color: #383d41; border: 1px solid #636c72; }

/* ==========================================================================
   Unified Testimony Template Styles
   Based on commission pattern with formal elements preserved
   ========================================================================== */

/* Main Template Container */
.itnj-testimony-template {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--itnj-space-10) var(--itnj-space-5);
    font-family: var(--itnj-font-primary);
    line-height: 1.6;
    color: var(--itnj-text-primary);
    background: var(--itnj-background);
}

/* Header Section */
.testimony-header {
    text-align: center;
    margin-bottom: var(--itnj-space-12);
    padding-bottom: var(--itnj-space-8);
    border-bottom: 2px solid var(--itnj-primary);
}

.testimony-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--itnj-space-5);
    color: var(--itnj-primary);
    line-height: 1.2;
}

.testimony-subtitle {
    font-size: 1.1rem;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-6);
    font-style: italic;
}

/* Meta Information Grid */
.testimony-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--itnj-space-5);
    margin-bottom: var(--itnj-space-8);
    font-size: 0.95rem;
}

.meta-item {
    text-align: center;
    padding: var(--itnj-space-4);
    background: var(--itnj-surface);
    border-radius: var(--itnj-radius-md);
    border: 1px solid var(--itnj-border);
    border-left: 4px solid var(--itnj-primary);
    transition: var(--itnj-transition);
}

.meta-item:hover {
    background: var(--itnj-surface);
    border-left-color: var(--itnj-primary-light);
    box-shadow: var(--itnj-shadow);
}

.meta-label {
    font-weight: 600;
    color: var(--itnj-text-muted);
    margin-bottom: var(--itnj-space-1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    color: var(--itnj-text-primary);
    font-weight: 500;
}

.meta-link {
    color: var(--itnj-primary);
    text-decoration: none;
    transition: color var(--itnj-transition);
}

.meta-link:hover {
    color: var(--itnj-primary-light);
    text-decoration: underline;
}

/* Main Content Container */
.testimony-content {
    background: var(--itnj-surface);
    padding: var(--itnj-space-10);
    border-radius: var(--itnj-radius-xl);
    box-shadow: var(--itnj-shadow-md);
    margin-bottom: var(--itnj-space-10);
    border: 1px solid var(--itnj-border);
}

.content-section {
    margin-bottom: var(--itnj-space-10);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-6);
    padding-bottom: var(--itnj-space-3);
    border-bottom: 2px solid var(--itnj-primary);
}

.testimony-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-8);
}

.testimony-text p {
    margin-bottom: var(--itnj-space-6);
}

.testimony-text h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin: var(--itnj-space-8) 0 var(--itnj-space-4) 0;
    padding-bottom: var(--itnj-space-2);
    border-bottom: 1px solid var(--itnj-border);
}

.testimony-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin: var(--itnj-space-6) 0 var(--itnj-space-3) 0;
}

/* Witness Information Section */
.witness-info {
    background: var(--itnj-background);
    padding: var(--itnj-space-6);
    border-radius: var(--itnj-radius-lg);
    border: 1px solid var(--itnj-border);
    border-left: 4px solid var(--itnj-success);
}

.witness-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-3);
}

.witness-details {
    color: var(--itnj-text-secondary);
    line-height: 1.6;
}

/* Documents Section */
.documents-section {
    margin-top: var(--itnj-space-10);
}

.documents-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-5);
    padding-bottom: var(--itnj-space-3);
    border-bottom: 2px solid var(--itnj-primary);
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--itnj-space-5);
    margin-top: var(--itnj-space-5);
}

.document-item {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-radius-lg);
    padding: var(--itnj-space-5);
    transition: var(--itnj-transition);
}

.document-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--itnj-shadow-lg);
    border-color: var(--itnj-border-strong);
}

.document-title {
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-3);
    font-size: 1rem;
}

.document-description {
    font-size: 0.9rem;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-4);
    line-height: 1.6;
}

.document-link {
    display: inline-flex;
    align-items: center;
    background: var(--itnj-primary);
    color: var(--itnj-text-inverse);
    padding: var(--itnj-space-2) var(--itnj-space-4);
    border-radius: var(--itnj-radius);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--itnj-transition);
}

.document-link:hover {
    background: var(--itnj-primary-light);
    color: var(--itnj-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--itnj-shadow);
}

/* Navigation Section */
.navigation-section {
    margin-top: var(--itnj-space-12);
    padding-top: var(--itnj-space-8);
    border-top: 2px solid var(--itnj-border-strong);
    text-align: center;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--itnj-space-4);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    background: var(--itnj-secondary);
    color: var(--itnj-text-inverse);
    padding: var(--itnj-space-3) var(--itnj-space-6);
    border-radius: var(--itnj-radius-md);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--itnj-transition);
}

.nav-link:hover {
    background: var(--itnj-secondary);
    color: var(--itnj-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--itnj-shadow);
    opacity: 0.9;
}

.nav-link.primary {
    background: var(--itnj-primary);
}

.nav-link.primary:hover {
    background: var(--itnj-primary-light);
}

/* ==========================================================================
   Formal Statement Elements (Preserved from formal template)
   ========================================================================== */

/* Formal Document Container */
.formal-document {
    background: var(--itnj-surface);
    padding: var(--itnj-space-16) var(--itnj-space-12);
    box-shadow: var(--itnj-shadow-lg);
    border: 1px solid var(--itnj-border);
    position: relative;
    border-radius: var(--itnj-radius-xl);
}

.formal-document::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--itnj-primary) 0%, var(--itnj-primary-dark) 100%);
    border-radius: var(--itnj-radius-xl) var(--itnj-radius-xl) 0 0;
}

/* Formal Header */
.formal-header {
    text-align: center;
    margin-bottom: var(--itnj-space-16);
    padding-bottom: var(--itnj-space-10);
    border-bottom: 3px double var(--itnj-primary);
}

.commission-title-formal {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--itnj-space-5);
    color: var(--itnj-primary);
}

.document-title-formal {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--itnj-space-5);
    color: var(--itnj-text-primary);
}

/* Formal Meta Grid */
.formal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--itnj-space-10);
    margin-bottom: var(--itnj-space-12);
    font-size: 1rem;
}

.meta-section {
    padding: var(--itnj-space-5) 0;
}

.meta-label-formal {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--itnj-text-muted);
    margin-bottom: var(--itnj-space-1);
    letter-spacing: 0.5px;
}

.meta-value-formal {
    color: var(--itnj-text-secondary);
    padding-left: var(--itnj-space-5);
    border-left: 3px solid var(--itnj-primary);
    font-weight: 500;
}

/* Formal Signature Section */
.formal-signature {
    margin-top: var(--itnj-space-16);
    text-align: right;
    font-size: 1rem;
}

.signature-line {
    margin-top: var(--itnj-space-10);
    border-top: 2px solid var(--itnj-text-primary);
    width: 300px;
    margin-left: auto;
    padding-top: var(--itnj-space-3);
    text-align: center;
    font-size: 0.9rem;
    color: var(--itnj-text-muted);
}

/* Formal Footer */
.formal-footer {
    margin-top: var(--itnj-space-20);
    padding-top: var(--itnj-space-8);
    border-top: 3px double var(--itnj-text-primary);
    text-align: center;
    font-size: 0.9rem;
    color: var(--itnj-text-muted);
}

/* ==========================================================================
   Enhanced Witness Information Styling
   ========================================================================== */

/* Witness Information Section */
.witness-information {
    margin: var(--itnj-space-12) 0;
    padding: var(--itnj-space-8);
    background: var(--itnj-background-light);
    border-radius: var(--itnj-border-radius);
    border: 1px solid var(--itnj-border);
}

.witness-information h3 {
    color: var(--the7-h3-color);
    font: var(--the7-h3-font);
    text-transform: var(--the7-h3-text-transform);
    letter-spacing: var(--the7-h3-letter-spacing);
    word-spacing: var(--the7-h3-word-spacing);
    text-decoration: var(--the7-h3-text-decoration);
    margin-bottom: var(--itnj-space-6);
}

.witness-profile {
    display: flex;
    gap: var(--itnj-space-5);
    align-items: flex-start;
}

.witness-portrait {
    flex-shrink: 0;
}

.witness-photo {
    width: 120px;
    height: 120px;
    border-radius: var(--itnj-border-radius);
    object-fit: cover;
    border: 2px solid var(--itnj-border);
    transition: border-color 0.2s ease;
}

.witness-photo:hover {
    border-color: var(--itnj-primary);
}

.witness-info {
    flex: 1;
    min-width: 0; /* Prevent flex item from growing beyond container */
}

.witness-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-3);
    line-height: 1.3;
}

.witness-bio {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--itnj-text-secondary);
}

.witness-bio p {
    margin-bottom: var(--itnj-space-3);
}

.witness-bio p:last-child {
    margin-bottom: 0;
}

/* Anonymous Witness Styling */
.witness-profile.anonymous .witness-info {
    text-align: center;
    padding: var(--itnj-space-4);
}

.witness-profile.anonymous .witness-name {
    color: var(--itnj-text-muted);
    font-style: italic;
    margin-bottom: var(--itnj-space-2);
}

.witness-note {
    font-size: 0.9rem;
    color: var(--itnj-text-muted);
    font-style: italic;
}

/* Responsive Design for Witness Section */
@media (max-width: 768px) {
    .witness-profile {
        flex-direction: column;
        text-align: center;
        gap: var(--itnj-space-4);
    }
    
    .witness-photo {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }
    
    .witness-information {
        padding: var(--itnj-space-5);
    }
}

/* ==========================================================================
   Multimedia Content Styling
   ========================================================================== */

/* Video Testimony Section */
.testimony-video {
    margin: var(--itnj-space-12) 0;
    padding: var(--itnj-space-8);
    background: var(--itnj-background-light);
    border-radius: var(--itnj-border-radius);
    border: 1px solid var(--itnj-border);
}

.testimony-video h3 {
    color: var(--itnj-primary);
    font-size: 1.5rem;
    margin-bottom: var(--itnj-space-6);
    font-weight: 600;
}

.video-container {
    position: relative;
    width: 100%;
    margin-bottom: var(--itnj-space-4);
}

.video-container iframe,
.video-container video {
    width: 100%;
    max-width: 100%;
    border-radius: var(--itnj-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.access-note {
    padding: var(--itnj-space-4);
    background: var(--itnj-warning-background);
    border: 1px solid var(--itnj-warning-border);
    border-radius: var(--itnj-border-radius);
    color: var(--itnj-warning-text);
    font-style: italic;
    text-align: center;
}

/* Audio Recordings Section */
.testimony-audio {
    margin: var(--itnj-space-12) 0;
    padding: var(--itnj-space-8);
    background: var(--itnj-background-light);
    border-radius: var(--itnj-border-radius);
    border: 1px solid var(--itnj-border);
}

.testimony-audio h3 {
    color: var(--itnj-primary);
    font-size: 1.5rem;
    margin-bottom: var(--itnj-space-6);
    font-weight: 600;
}

.audio-list {
    display: flex;
    flex-direction: column;
    gap: var(--itnj-space-8);
}

.audio-item {
    padding: var(--itnj-space-6);
    background: var(--itnj-background);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-border-radius);
    transition: box-shadow 0.2s ease;
}

.audio-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.audio-item h4 {
    color: var(--itnj-text-primary);
    font-size: 1.2rem;
    margin-bottom: var(--itnj-space-3);
    font-weight: 600;
}

.audio-description {
    color: var(--itnj-text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--itnj-space-4);
    line-height: 1.5;
}

.audio-player {
    margin: var(--itnj-space-4) 0;
}

.audio-player audio {
    width: 100%;
    max-width: 100%;
    border-radius: var(--itnj-border-radius-sm);
}

.audio-meta {
    display: flex;
    gap: var(--itnj-space-6);
    flex-wrap: wrap;
    margin-top: var(--itnj-space-4);
    font-size: 0.9rem;
    color: var(--itnj-text-muted);
}

.audio-duration,
.recording-date {
    display: flex;
    align-items: center;
}

.audio-duration::before {
    content: "⏱️";
    margin-right: var(--itnj-space-2);
}

.recording-date::before {
    content: "📅";
    margin-right: var(--itnj-space-2);
}

/* Transcripts Section */
.testimony-transcripts {
    margin: var(--itnj-space-12) 0;
    padding: var(--itnj-space-8);
    background: var(--itnj-background-light);
    border-radius: var(--itnj-border-radius);
    border: 1px solid var(--itnj-border);
}

.testimony-transcripts h3 {
    color: var(--itnj-primary);
    font-size: 1.5rem;
    margin-bottom: var(--itnj-space-6);
    font-weight: 600;
}

.transcripts-list {
    display: flex;
    flex-direction: column;
    gap: var(--itnj-space-8);
}

.transcript-item {
    padding: var(--itnj-space-6);
    background: var(--itnj-background);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-border-radius);
    transition: box-shadow 0.2s ease;
}

.transcript-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.transcript-restricted {
    padding: var(--itnj-space-6);
    background: var(--itnj-warning-background);
    border: 1px solid var(--itnj-warning-border);
    border-radius: var(--itnj-border-radius);
    text-align: center;
}

.transcript-restricted h4 {
    color: var(--itnj-warning-text);
    margin-bottom: var(--itnj-space-3);
}

.access-required {
    color: var(--itnj-warning-text);
    font-style: italic;
    margin: 0;
}

.transcript-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--itnj-space-4);
    flex-wrap: wrap;
    gap: var(--itnj-space-3);
}

.transcript-header h4 {
    color: var(--itnj-text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.transcript-badges {
    display: flex;
    gap: var(--itnj-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.transcript-type-badge,
.security-badge {
    padding: var(--itnj-space-1) var(--itnj-space-3);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--itnj-border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transcript-type-badge {
    background: var(--itnj-info-background);
    color: var(--itnj-info-text);
    border: 1px solid var(--itnj-info-border);
}

.transcript-type-badge.type-full {
    background: var(--itnj-success-background);
    color: var(--itnj-success-text);
    border: 1px solid var(--itnj-success-border);
}

.transcript-type-badge.type-excerpt {
    background: var(--itnj-info-background);
    color: var(--itnj-info-text);
    border: 1px solid var(--itnj-info-border);
}

.transcript-type-badge.type-summary {
    background: var(--itnj-warning-background);
    color: var(--itnj-warning-text);
    border: 1px solid var(--itnj-warning-border);
}

.security-badge {
    background: var(--itnj-danger-background);
    color: var(--itnj-danger-text);
    border: 1px solid var(--itnj-danger-border);
}

.security-badge.security-public {
    background: var(--itnj-success-background);
    color: var(--itnj-success-text);
    border: 1px solid var(--itnj-success-border);
}

.security-badge.security-registered {
    background: var(--itnj-info-background);
    color: var(--itnj-info-text);
    border: 1px solid var(--itnj-info-border);
}

.transcript-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--itnj-space-4);
    margin-bottom: var(--itnj-space-6);
    padding: var(--itnj-space-4);
    background: var(--itnj-background-light);
    border-radius: var(--itnj-border-radius-sm);
    font-size: 0.9rem;
}

.transcript-date,
.page-range {
    display: flex;
    align-items: center;
}

.meta-label {
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-right: var(--itnj-space-2);
}

.transcript-content {
    margin-bottom: var(--itnj-space-6);
}

.transcript-text {
    padding: var(--itnj-space-6);
    background: var(--itnj-background);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-border-radius-sm);
    font-family: var(--itnj-font-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--itnj-text-primary);
    max-height: 400px;
    overflow-y: auto;
}

.transcript-toggle {
    margin-top: var(--itnj-space-4);
    padding: var(--itnj-space-2) var(--itnj-space-4);
    background: var(--itnj-primary);
    color: var(--itnj-white);
    border: none;
    border-radius: var(--itnj-border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transcript-toggle:hover {
    background: var(--itnj-primary-dark);
    transform: translateY(-1px);
}

.transcript-download {
    margin-top: var(--itnj-space-4);
}

.transcript-download-link {
    display: inline-flex;
    align-items: center;
    padding: var(--itnj-space-3) var(--itnj-space-5);
    background: var(--itnj-success);
    color: var(--itnj-white);
    text-decoration: none;
    border-radius: var(--itnj-border-radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.transcript-download-link:hover {
    background: var(--itnj-success-dark);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--itnj-white);
}

.transcript-download-link::before {
    content: "⬇️";
    margin-right: var(--itnj-space-2);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */


@media (max-width: 768px) {
    #main {
        padding: 0px 0 70px 0;
    }
	
    .itnj-testimony-template {
        padding: var(--itnj-space-5) var(--itnj-space-4);
    }
    
    .testimony-title {
        font-size: 2rem;
    }
    
    .testimony-content {
        padding: var(--itnj-space-6) var(--itnj-space-5);
    }
    
    .testimony-meta {
        grid-template-columns: 1fr;
        gap: var(--itnj-space-3);
    }
    
    .documents-grid {
        grid-template-columns: 1fr;
    }
    
    .nav-links {
        flex-direction: column;
        align-items: stretch;
    }
    
    .nav-link {
        justify-content: center;
    }
    
    .formal-meta {
        grid-template-columns: 1fr;
        gap: var(--itnj-space-5);
    }
    
    .formal-document {
        padding: var(--itnj-space-10) var(--itnj-space-8);
    }
    
    /* PHASE 2: Multimedia content mobile adjustments */
    .testimony-video,
    .testimony-audio,
    .testimony-transcripts {
        padding: var(--itnj-space-5);
    }
    
    .transcript-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .transcript-badges {
        justify-content: flex-start;
        width: 100%;
    }
    
    .transcript-meta {
        grid-template-columns: 1fr;
        gap: var(--itnj-space-3);
    }
    
    .audio-meta {
        flex-direction: column;
        gap: var(--itnj-space-3);
    }
    
    .transcript-text {
        padding: var(--itnj-space-4);
        max-height: 300px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .itnj-testimony-template {
        padding: var(--itnj-space-5);
        color: #000;
        background: #fff;
    }
    
    .navigation-section {
        display: none;
    }
    
    .document-link {
        background: none;
        color: #000;
        border: 1px solid #000;
    }
    
    .testimony-content {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

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

.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;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-primary { color: var(--itnj-primary); }
.text-secondary { color: var(--itnj-text-secondary); }
.text-muted { color: var(--itnj-text-muted); }

/* ==========================================================================
   Commissioners Section Panel Styles
   ========================================================================== */

.commission-description,
.commission-commissioners,
.commission-testimonies {
    background: var(--itnj-background-secondary);
    padding: var(--itnj-space-6);
    border-radius: var(--itnj-radius-lg);
    margin: var(--itnj-space-8) 0;
}

.commission-commissioners {
    border: 1px solid var(--itnj-border);
    box-shadow: var(--itnj-shadow-soft);
}

.commissioners-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--itnj-space-6);
    border-bottom: 1px solid var(--itnj-border);
    padding-bottom: var(--itnj-space-4);
}

.commissioners-title {
    color: var(--the7-h3-color);
    font: var(--the7-h3-font);
    text-transform: var(--the7-h3-text-transform);
    letter-spacing: var(--the7-h3-letter-spacing);
    word-spacing: var(--the7-h3-word-spacing);
    text-decoration: var(--the7-h3-text-decoration);
    margin: 0;
}

.view-all-commissioners {
    padding: var(--itnj-space-3) var(--itnj-space-5);
    background: transparent;
    color: var(--itnj-primary);
    border: 1px solid var(--itnj-primary);
    border-radius: var(--itnj-border-radius);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.view-all-commissioners:hover {
    background: var(--itnj-primary);
    color: white;
    transform: translateY(-1px);
}

.commissioners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--itnj-space-6);
    margin-bottom: var(--itnj-space-6);
}

.commissioner-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.commissioner-card {
    background: var(--itnj-background-primary);
    border: 1px solid var(--itnj-border);
    border-radius: var(--itnj-border-radius);
    padding: var(--itnj-space-6);
    height: 90%;
    transition: all 0.2s ease;
    box-shadow: var(--itnj-shadow-soft);
}

.commissioner-card:hover {
    border-color: var(--itnj-primary);
    box-shadow: var(--itnj-shadow-elevated);
    transform: translateY(-2px);
}

.commissioner-portrait-wrapper {
    text-align: center;
    margin-bottom: var(--itnj-space-4);
}

.commissioner-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 3px solid var(--itnj-border);
}

.commissioner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commissioner-info {
    text-align: center;
}

.commissioner-name {
    color: var(--itnj-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--itnj-space-3);
}

.commissioner-bio {
    color: var(--itnj-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--itnj-space-4);
}

.commissioner-link-indicator {
    margin-top: auto;
    padding-top: var(--itnj-space-3);
}

.view-profile {
    color: var(--itnj-primary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.commissioner-card:hover .view-profile {
    color: var(--itnj-primary);
    font-weight: 600;
}

.commissioners-more {
    text-align: center;
    padding-top: var(--itnj-space-6);
    border-top: 1px solid var(--itnj-border);
}

.commissioners-count {
    color: var(--itnj-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--itnj-space-4);
}

.commissioners-more .btn {
    padding: var(--itnj-space-3) var(--itnj-space-6);
    background: var(--itnj-primary);
    color: white;
    border: none;
    border-radius: var(--itnj-border-radius);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.commissioners-more .btn:hover {
    background: var(--itnj-primary-dark);
    transform: translateY(-1px);
}

.commissioners-empty {
    text-align: center;
    padding: var(--itnj-space-8);
    color: var(--itnj-text-muted);
}

.no-commissioners-message {
    font-size: 1rem;
    margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .commissioners-header {
        flex-direction: column;
        gap: var(--itnj-space-4);
        align-items: stretch;
    }
    
    .view-all-commissioners {
        text-align: center;
    }
    
    .commissioners-grid {
        grid-template-columns: 1fr;
        gap: var(--itnj-space-4);
    }
}

/* ==========================================================================
   Commissioner Template CSS Framework
   ========================================================================== */

/* Force heading fonts with stronger selectors for commissioner single pages */
.commissioner-single .commissioner-name-display,
.commissioner-single .commissioner-biography h3,
.commissioner-single .commissioner-commissions h3,
.commissioner-single .commissioner-testimonies h3,
.commissioner-single .commissioner-qualifications h4,
.commissioner-single .commissioner-background h4,
.commissioner-single .commissioner-topics h4 {
    font-family: var(--itnj-heading-font, 'Cinzel', Georgia, serif) !important;
}

.commissioner-single {
    font-family: var(--itnj-font-primary);
    color: var(--itnj-text-primary);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--itnj-space-4);
}

/* Commission Context Breadcrumb */
.commission-context-breadcrumb {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 4px;
    padding: var(--itnj-space-2) var(--itnj-space-4);
    margin-bottom: var(--itnj-space-6);
    font-size: 0.9em;
}

.commission-context-breadcrumb a {
    color: var(--itnj-accent);
    text-decoration: none;
}

.commission-context-breadcrumb a:hover {
    text-decoration: underline;
}

.commission-context-breadcrumb .separator {
    color: var(--itnj-text-secondary);
    margin: 0 var(--itnj-space-2);
}

.commission-context-breadcrumb .current {
    color: var(--itnj-text-primary);
    font-weight: 600;
}

/* Commissioner Header */
.commissioner-header {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 8px;
    padding: var(--itnj-space-6);
    margin-bottom: var(--itnj-space-8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.commissioner-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--itnj-space-6);
    align-items: start;
}

/* Enhanced commissioner-name-display for single pages */
.commissioner-single .commissioner-name-display {
    font-family: var(--itnj-font-serif) !important;
    font-size: 2rem;
    font-weight: 500;
    color: var(--itnj-heading-color);
    margin-bottom: var(--itnj-space-4);
    line-height: 1.2;
}

/* Role Badges */
.commissioner-roles {
    margin-bottom: var(--itnj-space-4);
}

.role-badge {
    display: inline-block;
    background: var(--itnj-accent);
    color: white;
    padding: var(--itnj-space-2) var(--itnj-space-4);
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    margin-right: var(--itnj-space-2);
    margin-bottom: var(--itnj-space-2);
}

/* Topics Section */
.commissioner-topics {
    margin-bottom: var(--itnj-space-6);
}

.commissioner-topics h4 {
    font-family: var(--itnj-font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-2);
}

.topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-space-2);
	justify-content: center;:
}

.topic-badge {
    background: #f8f9fa;
    border: 1px solid var(--itnj-border);
    color: var(--itnj-text-secondary);
    padding: 0.25rem var(--itnj-space-2);
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 500;
}

/* Qualifications and Background Sections */
.commissioner-qualifications,
.commissioner-background {
    margin-bottom: var(--itnj-space-6);
}

.commissioner-qualifications h4,
.commissioner-background h4 {
    font-family: var(--itnj-font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-2);
    border-bottom: 2px solid var(--itnj-accent);
    padding-bottom: 0.25rem;
}

.qualifications-content,
.background-content {
    color: var(--itnj-text-secondary);
    font-size: 0.95em;
}

/* Biography Section */
.commissioner-biography {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 8px;
    padding: var(--itnj-space-6);
    margin-bottom: var(--itnj-space-8);
}

.commissioner-biography h3 {
    font-family: var(--itnj-font-serif) !important;
    font-size: 1.5rem;
    font-weight: 600;
/*    color: var(--itnj-text-primary); */
    color: var(--itnj-heading-color);
    margin-bottom: var(--itnj-space-4);
    border-bottom: 3px solid var(--itnj-accent);
    padding-bottom: var(--itnj-space-2);
}

.bio-content {
    color: var(--itnj-text-secondary);
    font-size: 1rem;
}

.bio-content h1 {
    color: var(--itnj-heading-color);
    font-size: 1.4rem;
}

.bio-content h2 {
    color: var(--itnj-heading-color);
    font-size: 1.3rem;
}

.bio-content h3, .bio-content h4 {
    color: var(--itnj-heading-color);
    font-size: 1.2rem;
}


/* Commissions Section */
.commissioner-commissions {
    margin-bottom: var(--itnj-space-8);
}

.commissioner-commissions h3 {
    font-family: var(--itnj-font-serif) !important;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-4);
    border-bottom: 3px solid var(--itnj-accent);
    padding-bottom: var(--itnj-space-2);
}

.commissions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--itnj-space-4);
}

.commission-item {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 8px;
    padding: var(--itnj-space-4);
    transition: box-shadow 0.3s ease;
}

.commission-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.commission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--itnj-space-2);
}

.commission-header h4 {
    font-family: var(--itnj-font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.commission-header h4 a {
    color: var(--itnj-accent);
    text-decoration: none;
}

.commission-header h4 a:hover {
    text-decoration: underline;
}

.commission-status {
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
    margin-left: var(--itnj-space-2);
}

.commission-status.status-completed {
    background: #d1ecf1;
    color: #0c5460;
}

.commission-status.status-pending {
    background: #fff3cd;
    color: #856404;
}

.commission-status.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.commission-status.status-suspended {
    background: #f8d7da;
    color: #721c24;
}

.commission-dates {
    font-size: 0.9em;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-2);
}

.commission-description {
    font-size: 0.9em;
    color: var(--itnj-text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   Enhanced Testimony Cards - Compact Design System
   ========================================================================== */

/* Testimony Grid Layout */
.testimonies-grid-compact {
  display: grid;
  gap: var(--itnj-space-4);
  margin-top: var(--itnj-space-6);
}

.testimonies-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 100%;
}

.testimonies-archive-grid {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  max-width: 100%;
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
  .testimonies-grid-compact {
    grid-template-columns: 1fr;
    gap: var(--itnj-space-3);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .testimonies-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonies-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .testimonies-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonies-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Enhanced Testimony Cards */
.testimony-preview-card,
.testimony-card {
  background: var(--itnj-background-primary);
  border: 1px solid var(--itnj-border-color);
  border-radius: var(--itnj-border-radius);
  padding: var(--itnj-space-4);
  transition: all var(--itnj-transition);
  position: relative;
  overflow: hidden;
  min-height: 150px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.testimony-preview-card:hover,
.testimony-card:hover {
  border-color: var(--itnj-primary);
  box-shadow: var(--itnj-shadow-md);
  transform: translateY(-2px);
}

/* Priority Indicators */
.testimony-priority-badge {
  position: absolute;
  top: var(--itnj-space-2);
  right: var(--itnj-space-2);
  z-index: 2;
}

.testimony-priority-badge .badge-promoted {
  background: linear-gradient(135deg, var(--itnj-accent), #ff6b6b);
  color: white;
  padding: var(--itnj-space-1) var(--itnj-space-2);
  border-radius: var(--itnj-border-radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: var(--itnj-shadow);
}

.testimony-priority-badge .badge-urgent {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: white;
  padding: var(--itnj-space-1) var(--itnj-space-2);
  border-radius: var(--itnj-border-radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: var(--itnj-shadow);
  animation: pulse 2s infinite;
}

.testimony-priority-badge .badge-featured {
  background: linear-gradient(135deg, var(--itnj-primary), #3b82f6);
  color: white;
  padding: var(--itnj-space-1) var(--itnj-space-2);
  border-radius: var(--itnj-border-radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: var(--itnj-shadow);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Priority Card Styling */
.testimony-promoted {
  border-left: 4px solid var(--itnj-accent);
}

.testimony-priority-urgent {
  border-left: 4px solid #dc2626;
  background: linear-gradient(135deg, #fef2f2, var(--itnj-background-primary));
}

.testimony-priority-featured {
  border-left: 4px solid var(--itnj-primary);
  background: linear-gradient(135deg, #f0f9ff, var(--itnj-background-primary));
}

.testimony-priority-highlighted {
  border-left: 4px solid #f59e0b;
}

.testimony-elevated {
  box-shadow: var(--itnj-shadow-md);
}

/* Card Header */
.testimony-card-header {
  margin-bottom: var(--itnj-space-2);
  padding-right: var(--itnj-space-8); /* Space for priority badge */
}

.testimony-title {
  margin: 0 0 var(--itnj-space-1) 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.testimony-title a {
  color: var(--itnj-text-primary);
  text-decoration: none;
  transition: color var(--itnj-transition);
}

.testimony-title a:hover {
  color: var(--itnj-primary);
  text-decoration: underline;
}

/* Meta Information Grid */
.testimony-meta-grid {
  display: flex;
  flex-direction: column;
  gap: var(--itnj-space-1);
  margin-bottom: var(--itnj-space-2);
  font-size: 0.85rem;
}

.testimony-witness {
  display: flex;
  flex-direction: column;
  gap: var(--itnj-space-1);
}

.witness-name {
  color: var(--itnj-text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--itnj-space-1);
}

.witness-name i {
  color: var(--itnj-text-secondary);
  font-size: 0.8rem;
}

.witness-role {
  color: var(--itnj-text-secondary);
  font-size: 0.8rem;
  font-style: italic;
  margin-left: var(--itnj-space-4); /* Align with name text */
}

.testimony-meta-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--itnj-space-3);
  color: var(--itnj-text-secondary);
  font-size: 0.8rem;
}

.testimony-meta-details span {
  display: flex;
  align-items: center;
  gap: var(--itnj-space-1);
}

.testimony-meta-details i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.reading-time {
  color: var(--itnj-primary);
  font-weight: 500;
}

/* Compact Summary */
.testimony-summary-compact {
  flex: 1;
  margin-bottom: var(--itnj-space-2);
  overflow: hidden;
}

.testimony-summary-compact p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--itnj-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimony-summary-compact .no-summary {
  color: var(--itnj-text-muted);
  font-style: italic;
  font-size: 0.8rem;
}

/* Compact Topics */
.testimony-topics-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--itnj-space-1);
  margin-bottom: var(--itnj-space-2);
}

.topic-badge.compact {
  background: var(--itnj-background-light);
  color: var(--itnj-text-primary);
  border: 1px solid var(--itnj-border);
  padding: var(--itnj-space-1) var(--itnj-space-2);
  border-radius: var(--itnj-border-radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--itnj-transition);
  white-space: nowrap;
}

.topic-badge.compact:hover {
  background: var(--itnj-primary);
  color: white;
  border-color: var(--itnj-primary);
}

.topic-more {
  color: var(--itnj-text-secondary);
  font-size: 0.7rem;
  font-style: italic;
  padding: var(--itnj-space-1) var(--itnj-space-2);
}

/* Card Footer */
.testimony-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--itnj-space-2);
  border-top: 1px solid var(--itnj-border);
}

.btn.btn-small {
  padding: var(--itnj-space-1) var(--itnj-space-3);
  font-size: 0.8rem;
  border-radius: var(--itnj-border-radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--itnj-transition);
}

.btn.btn-primary {
  background: var(--itnj-primary);
  color: white;
  border: 1px solid var(--itnj-primary);
}

.btn.btn-primary:hover {
  background: var(--itnj-primary-dark);
  border-color: var(--itnj-primary-dark);
  transform: translateY(-1px);
}

.priority-indicator {
  color: var(--itnj-accent);
  font-size: 1rem;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Testimonies Header Enhancement */
.testimonies-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--itnj-space-4);
  padding-bottom: var(--itnj-space-2);
  border-bottom: 2px solid var(--itnj-border);
}

.testimonies-title {
  margin: 0;
  color: var(--itnj-text-primary);
  font-size: 1.5rem;
  font-weight: 600;
}

.view-all-testimonies.btn.btn-outline {
  background: transparent;
  color: var(--itnj-primary);
  border: 1px solid var(--itnj-primary);
  padding: var(--itnj-space-2) var(--itnj-space-4);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--itnj-border-radius);
  transition: all var(--itnj-transition);
}

.view-all-testimonies.btn.btn-outline:hover {
  background: var(--itnj-primary);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--itnj-shadow);
}

/* More Testimonies Section */
.testimonies-more {
  text-align: center;
  padding: var(--itnj-space-6) var(--itnj-space-4);
  background: var(--itnj-background-light);
  border-radius: var(--itnj-border-radius);
  margin-top: var(--itnj-space-6);
}

.testimonies-count {
  margin: 0 0 var(--itnj-space-3) 0;
  color: var(--itnj-text-secondary);
  font-size: 0.9rem;
}

/* Empty State */
.testimonies-empty {
  text-align: center;
  padding: var(--itnj-space-8) var(--itnj-space-4);
  color: var(--itnj-text-secondary);
}

.no-testimonies-message {
  margin: 0 0 var(--itnj-space-4) 0;
  font-size: 1rem;
}

/* Archive Mode Specific Styles */
.testimonies-archive-mode .testimony-card {
  max-height: none;
  min-height: 140px;
}

.testimonies-archive-mode .testimony-summary-compact p {
  -webkit-line-clamp: 3;
}

.testimonies-archive-mode .testimony-meta-details {
  flex-direction: column;
  gap: var(--itnj-space-1);
}

/* Pagination Styles */
.testimonies-pagination {
  margin-top: var(--itnj-space-6);
  text-align: center;
}

.testimonies-pagination .page-numbers {
  display: inline-block;
  padding: var(--itnj-space-2) var(--itnj-space-3);
  margin: 0 var(--itnj-space-1);
  background: var(--itnj-background-primary);
  border: 1px solid var(--itnj-border);
  color: var(--itnj-text-primary);
  text-decoration: none;
  border-radius: var(--itnj-border-radius-sm);
  transition: all var(--itnj-transition);
}

.testimonies-pagination .page-numbers:hover,
.testimonies-pagination .page-numbers.current {
  background: var(--itnj-primary);
  color: white;
  border-color: var(--itnj-primary);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .testimony-preview-card,
  .testimony-card {
    background: #1f2937;
    border-color: #374151;
  }
  
  .testimony-priority-urgent {
    background: linear-gradient(135deg, #311b1b, #1f2937);
  }
  
  .testimony-priority-featured {
    background: linear-gradient(135deg, #1e293b, #1f2937);
  }
  
  .topic-badge.compact {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
  }
}

/* Print Styles */
@media print {
  .testimonies-grid-compact {
    grid-template-columns: 1fr;
    gap: var(--itnj-space-2);
  }
  
  .testimony-priority-badge,
  .priority-indicator {
    display: none;
  }
  
  .testimony-card-footer {
    display: none;
  }
}

/* Testimonies Section */
.commissioner-testimonies {
    margin-bottom: var(--itnj-space-8);
}

.commissioner-testimonies h3 {
    font-family: var(--itnj-font-serif) !important;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--itnj-text-primary);
    margin-bottom: var(--itnj-space-4);
    border-bottom: 3px solid var(--itnj-accent);
    padding-bottom: var(--itnj-space-2);
}

.testimonies-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--itnj-space-4);
}

.testimony-item {
    background: var(--itnj-surface);
    border: 1px solid var(--itnj-border);
    border-radius: 8px;
    padding: var(--itnj-space-4);
    transition: box-shadow 0.3s ease;
}

.testimony-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.testimony-header {
    margin-bottom: var(--itnj-space-2);
}

.testimony-header h4 {
    font-family: var(--itnj-font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--itnj-space-2) 0;
}

.testimony-header h4 a {
    color: var(--itnj-accent);
    text-decoration: none;
}

.testimony-header h4 a:hover {
    text-decoration: underline;
}

.testimony-meta {
    display: flex;
    gap: var(--itnj-space-4);
    font-size: 0.85em;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-2);
}

.testimony-commission {
    font-size: 0.9em;
    color: var(--itnj-text-secondary);
    margin-bottom: var(--itnj-space-2);
}

.testimony-commission a {
    color: var(--itnj-accent);
    text-decoration: none;
}

.testimony-commission a:hover {
    text-decoration: underline;
}

.testimony-excerpt {
    font-size: 0.9em;
    color: var(--itnj-text-secondary);
    line-height: 1.5;
}

.testimonies-more {
    text-align: center;
    margin-top: var(--itnj-space-4);
    padding: var(--itnj-space-4);
    background: #f8f9fa;
    border-radius: 4px;
    color: var(--itnj-text-secondary);
    font-style: italic;
}

/* Back to Commission Section */
.back-to-commission {
    text-align: center;
    margin-top: var(--itnj-space-8);
}

/* Responsive Design for Commissioner Single Pages */
@media (max-width: 768px) {

#main {
    padding: 0 0 40px 0;
}
    .commissioner-single {
        padding: var(--itnj-space-2);
    }
    
    .commissioner-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .commissioner-single .commissioner-name-display {
        font-size: 1.5rem;
    }
    
    .commissions-list {
        grid-template-columns: 1fr;
    }
    
    .testimonies-list {
        grid-template-columns: 1fr;
    }
    
    .commission-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .commission-status {
        margin-left: 0;
        margin-top: var(--itnj-space-2);
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .topics-list {
        flex-direction: column;
    }
    
    .testimony-meta {
        flex-direction: column;
        gap: var(--itnj-space-2);
    }
    
    .role-badge {
        display: block;
        text-align: center;
        margin-right: 0;
    }
	#main {
    padding: 0 0 30px 0;
}
}

/* ==========================================================================
   Commissioners Archive Styles
   ========================================================================== */

/* CSS Variables Framework for Commissioners Archive */
.commissioners-archive {
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    line-height: var(--itnj-heading-line-height, 1.5);
}

.commissioners-archive .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--itnj-spacing-lg, var(--itnj-space-6));
}

/* Archive Header */
.commissioners-archive .archive-header {
    margin-bottom: var(--itnj-spacing-xl, var(--itnj-space-8));
}

.commissioners-archive .commission-context {
    font-size: var(--itnj-h2-size, 1.5rem);
    font-weight: var(--itnj-heading-font-weight, 600);
    font-family: var(--itnj-heading-font-family, var(--itnj-font-serif));
    color: var(--itnj-heading-color, var(--itnj-text-primary));
    margin-bottom: var(--itnj-spacing-md, var(--itnj-space-4));
}

.commissioners-archive .breadcrumbs {
    font-size: var(--itnj-font-size-sm, 0.9rem);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    color: var(--itnj-text-secondary);
}

.commissioners-archive .breadcrumbs a {
    color: var(--itnj-accent-color, var(--itnj-primary));
    text-decoration: none;
}

.commissioners-archive .breadcrumbs a:hover {
    text-decoration: underline;
}

/* Commissioners Grid */
.commissioners-archive .commissioners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--itnj-grid-gap, var(--itnj-space-6));
    margin-bottom: var(--itnj-spacing-xl, var(--itnj-space-8));
}

/* Commissioner Cards */
.commissioners-archive .commissioner-card {
    background: var(--itnj-background-primary);
    border-radius: var(--itnj-border-radius, 8px);
    padding: var(--itnj-spacing-lg, var(--itnj-space-6));
    box-shadow: var(--itnj-shadow, 0 2px 4px rgba(0,0,0,0.1));
    transition: all var(--itnj-transition-speed, 0.3s) ease;
    border: var(--itnj-border-width, 1px) solid var(--itnj-border);
}

.commissioners-archive .commissioner-card:hover {
    box-shadow: var(--itnj-shadow-hover, 0 4px 12px rgba(0,0,0,0.15));
    transform: var(--itnj-hover-transform, translateY(-2px));
}

/* Portrait */
.commissioners-archive .commissioner-portrait-wrapper {
    text-align: center;
    margin-bottom: var(--itnj-spacing-md, var(--itnj-space-4));
}

.commissioners-archive .commissioner-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--itnj-border-width, 3px) solid var(--itnj-border);
    margin: 0 auto;
    display: block;
}

.commissioners-archive .commissioner-portrait.placeholder {
    background: var(--itnj-background-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itnj-text-muted);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    font-size: var(--itnj-font-size-2xl, 2rem);
    font-weight: var(--itnj-heading-font-weight, 600);
}

/* Commissioner Content */
.commissioners-archive .commissioner-name {
    margin: 0 0 var(--itnj-spacing-sm, var(--itnj-space-2)) 0;
    font-size: var(--itnj-font-size-lg, 1.1rem);
    font-weight: var(--itnj-heading-font-weight, 600);
    font-family: var(--itnj-heading-font-family, var(--itnj-font-serif));
}

.commissioners-archive .commissioner-name a {
    color: var(--itnj-heading-color, var(--itnj-text-primary));
    text-decoration: none;
}

.commissioners-archive .commissioner-name a:hover {
    color: var(--itnj-accent-color, var(--itnj-primary));
}

.commissioners-archive .commissioner-role {
    color: var(--itnj-text-secondary);
    font-size: var(--itnj-font-size-sm, 0.9rem);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    margin-bottom: var(--itnj-spacing-sm, var(--itnj-space-2));
    font-style: italic;
}

.commissioners-archive .commissioner-bio {
    color: var(--itnj-text-secondary);
    font-size: var(--itnj-font-size-base, 1rem);
    line-height: var(--itnj-heading-line-height, 1.5);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    margin-bottom: var(--itnj-spacing-md, var(--itnj-space-4));
}

/* Expertise Section */
.commissioners-archive .commissioner-expertise {
    margin-top: var(--itnj-spacing-md, var(--itnj-space-4));
}

.commissioners-archive .commissioner-expertise h4 {
    color: var(--itnj-text-primary);
    font-size: var(--itnj-font-size-sm, 0.9rem);
    font-weight: var(--itnj-heading-font-weight, 600);
    font-family: var(--itnj-heading-font-family, var(--itnj-font-serif));
    margin: 0 0 var(--itnj-spacing-xs, var(--itnj-space-1)) 0;
}

.commissioners-archive .topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-spacing-xs, var(--itnj-space-1));
}

.commissioners-archive .topic-badge {
    display: inline-block;
    background: var(--itnj-background-secondary);
    color: var(--itnj-text-muted);
    padding: var(--itnj-spacing-xs, var(--itnj-space-1)) var(--itnj-spacing-sm, var(--itnj-space-2));
    border-radius: var(--itnj-border-radius-sm, 4px);
    font-size: var(--itnj-font-size-sm, 0.8rem);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    border: 1px solid var(--itnj-border);
}

/* Footer and Button */
.commissioners-archive .archive-footer {
    text-align: center;
    margin-top: var(--itnj-spacing-xl, var(--itnj-space-8));
}

.commissioners-archive .btn,
.commissioners-archive .btn-primary {
    display: inline-block;
    padding: var(--itnj-spacing-md, var(--itnj-space-4)) var(--itnj-spacing-lg, var(--itnj-space-6));
    background-color: var(--itnj-button-background-color, var(--itnj-primary));
    color: var(--itnj-button-text-color, var(--itnj-text-inverse));
    border: var(--itnj-button-border-width, 1px) solid var(--itnj-button-border-color, var(--itnj-primary));
    border-radius: var(--itnj-button-border-radius, 8px);
    font-family: var(--itnj-button-font-family, var(--itnj-font-primary));
    font-size: var(--itnj-button-font-size, 14px);
    font-weight: var(--itnj-button-font-weight, 500);
    text-decoration: none;
    text-align: center;
    transition: all var(--itnj-transition-speed, 0.3s) ease;
    cursor: pointer;
}

.commissioners-archive .btn:hover,
.commissioners-archive .btn-primary:hover {
    background-color: var(--itnj-button-hover-background-color, var(--itnj-accent));
    color: var(--itnj-button-hover-text-color, var(--itnj-text-inverse));
    border-color: var(--itnj-button-hover-border-color, var(--itnj-accent));
    transform: var(--itnj-button-hover-transform, translateY(-1px));
}

/* No Results */
.commissioners-archive .no-results {
    text-align: center;
    padding: var(--itnj-spacing-xl, var(--itnj-space-8));
    background: var(--itnj-background-secondary);
    border-radius: var(--itnj-border-radius, 8px);
    border: var(--itnj-border-width, 1px) solid var(--itnj-border);
}

.commissioners-archive .no-results p {
    color: var(--itnj-text-secondary);
    font-family: var(--itnj-primary-font-family, var(--itnj-font-primary));
    font-size: var(--itnj-font-size-base, 1rem);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .commissioners-archive .commissioners-grid {
        grid-template-columns: 1fr;
    }
    
    .commissioners-archive .container {
        padding: var(--itnj-spacing-md, var(--itnj-space-4));
    }
}

/* ==========================================================================
   Testimonies Archive Styles - Commission-specific Testimony Archive
   ========================================================================== */

/* Testimonies Archive - Unified with Commission Page Structure */
.testimonies-archive {
    font-family: var(--itnj-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    color: var(--itnj-text-primary, #1f2937);
}

/* Archive Header with Modern Typography */
.testimonies-archive .archive-header {
    background: var(--itnj-background-primary, #ffffff);
    padding: var(--itnj-spacing-lg, 2rem);
    border-radius: var(--itnj-border-radius, 8px);
    box-shadow: var(--itnj-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
    margin-bottom: var(--itnj-spacing-xl, 3rem);
    border-left: 4px solid var(--itnj-primary, #1e3a8a);
}

.testimonies-archive .entry-title {
    margin-bottom: var(--itnj-spacing-sm, 0.5rem) !important;
}

.testimonies-archive .archive-subheading {
    font-size: var(--itnj-h3-size, 1.6rem);
    color: var(--itnj-text-secondary, #6b7280);
    font-weight: var(--itnj-heading-font-weight, 600);
    margin-bottom: var(--itnj-spacing-md, 1rem) !important;
}

/* Archive Sections Enhancement */
.testimonies-archive .entry-content section {
    background: var(--itnj-background-secondary, #f9f9f9);
    padding: var(--itnj-spacing-lg, 2rem);
    border-radius: var(--itnj-border-radius, 8px);
    margin-bottom: var(--itnj-spacing-lg, 2rem);
    transition: all var(--itnj-transition-speed, 0.3s) ease;
}

.testimonies-archive .entry-content section:hover {
    transform: translateY(-2px);
    box-shadow: var(--itnj-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.testimonies-archive .entry-content h3 {
    border-bottom: 2px solid var(--itnj-primary, #1e3a8a);
    padding-bottom: var(--itnj-spacing-sm, 0.5rem);
}

/* Testimonies Archive Responsive Design */
@media (max-width: 768px) {
    .testimonies-archive .archive-header {
        padding: var(--itnj-spacing-md, 1rem);
    }
    
    .testimonies-archive .entry-content section {
        padding: var(--itnj-spacing-md, 1rem);
    }
}

/* ==========================================================================
   Commission Template - Default Variant (Modernized)
   ========================================================================== */

/* Modernized Commission Template Styles - Uses CSS Variables */
.commission-modernized {
    font-family: var(--itnj-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    color: var(--itnj-text-primary, #1f2937);
}

/* Commission Header with Modern Typography */
.commission-modernized .commission-header {
    background: var(--itnj-background-primary, #ffffff);
    padding: var(--itnj-spacing-lg, 2rem);
    border-radius: var(--itnj-border-radius, 8px);
    box-shadow: var(--itnj-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
    margin-bottom: var(--itnj-spacing-xl, 3rem);
    border-left: 4px solid var(--itnj-primary, #1e3a8a);
}

/* Title uses new heading system */
.commission-modernized .entry-title {
    /* Inherits from unified heading system: --itnj-h1-size, --itnj-heading-color, etc. */
    margin-bottom: var(--itnj-spacing-sm, 0.5rem) !important;
}

.commission-modernized .commission-subheading {
    font-size: var(--itnj-h3-size, 1.6rem);
    color: var(--itnj-text-secondary, #6b7280);
    font-weight: var(--itnj-heading-font-weight, 600);
    margin-bottom: var(--itnj-spacing-md, 1rem) !important;
}

.commission-modernized .commission-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-spacing-md, 1rem);
    margin-bottom: 0 !important;
    padding: var(--itnj-spacing-md, 1rem) 0;
    border-top: 1px solid var(--itnj-border-color, #e5e7eb);
}

.commission-modernized .commission-meta > div {
    display: flex;
    align-items: center;
    gap: var(--itnj-spacing-xs, 0.25rem);
    font-size: var(--itnj-font-size-sm, 14px);
}

.commission-modernized .commission-meta .date-label,
.commission-modernized .commission-meta .location-label {
    font-weight: 600;
    color: var(--itnj-text-primary, #1f2937);
}

/* Status Badge Enhancement */
.commission-modernized .status-badge {
    padding: var(--itnj-spacing-xs, 0.25rem) var(--itnj-spacing-sm, 0.5rem);
    border-radius: var(--itnj-border-radius, 8px);
    font-size: var(--itnj-font-size-sm, 14px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.commission-modernized .status-active {
    background: var(--itnj-success, #22c55e);
    color: white;
}

.commission-modernized .status-pending {
    background: var(--itnj-warning, #f59e0b);
    color: white;
}

.commission-modernized .status-concluded {
    background: var(--itnj-secondary, #64748b);
    color: white;
}

/* Commission Notice Enhancement */
.commission-modernized .commission-notice {
    background: linear-gradient(135deg, var(--itnj-primary, #1e3a8a), var(--itnj-secondary, #64748b));
    color: white;
    padding: var(--itnj-spacing-lg, 2rem);
    border-radius: var(--itnj-border-radius, 8px);
    margin-bottom: var(--itnj-spacing-lg, 2rem);
    box-shadow: var(--itnj-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
}

/* Content Sections with Modern Layout */
.commission-modernized .entry-content {
    max-width: none;
}

.commission-modernized .entry-content section {
    background: var(--itnj-background-secondary, #f9f9f9);
    padding: var(--itnj-spacing-lg, 2rem);
    border-radius: var(--itnj-border-radius, 8px);
    margin-bottom: var(--itnj-spacing-lg, 2rem);
    transition: all var(--itnj-transition-speed, 0.3s) ease;
}

.commission-modernized .entry-content section:hover {
    transform: translateY(-2px);
    box-shadow: var(--itnj-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Section headings inherit from heading system */
.commission-modernized .entry-content h3 {
    /* Uses --itnj-h3-size, --itnj-heading-color, --itnj-heading-font-weight from unified system */
    border-bottom: 2px solid var(--itnj-primary, #1e3a8a);
    padding-bottom: var(--itnj-spacing-sm, 0.5rem);
}

/* Topics Enhancement */
.commission-modernized .topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--itnj-spacing-sm, 0.5rem);
    margin-top: var(--itnj-spacing-md, 1rem);
}

.commission-modernized .topic-badge {
    background: var(--itnj-button-background-color, var(--itnj-primary, #1e3a8a));
    color: var(--itnj-button-text-color, white);
    padding: var(--itnj-spacing-xs, 0.25rem) var(--itnj-spacing-sm, 0.5rem);
    border: var(--itnj-button-border-width, 1px) solid var(--itnj-button-border-color, var(--itnj-primary, #1e3a8a));
    border-radius: var(--itnj-button-border-radius, var(--itnj-border-radius, 8px));
    font-family: var(--itnj-button-font-family, inherit);
    font-size: var(--itnj-button-font-size, 14px);
    font-weight: var(--itnj-button-font-weight, 500);
    transition: all var(--itnj-transition-speed, 0.3s) ease;
}

.commission-modernized .topic-badge:hover {
    background: var(--itnj-button-hover-background-color, var(--itnj-accent, #dc2626));
    color: var(--itnj-button-hover-text-color, white);
    border-color: var(--itnj-button-hover-border-color, var(--itnj-accent, #dc2626));
    transform: var(--itnj-button-hover-transform, translateY(-1px));
}

/* Documents Section Enhancement */
.commission-modernized .documents-list {
    display: grid;
    gap: var(--itnj-spacing-md, 1rem);
    margin-top: var(--itnj-spacing-md, 1rem);
}

.commission-modernized .document-item {
    background: var(--itnj-background-primary, #ffffff);
    padding: var(--itnj-spacing-md, 1rem);
    border-radius: var(--itnj-border-radius, 8px);
    border: 1px solid var(--itnj-border-color, #e5e7eb);
    transition: all var(--itnj-transition-speed, 0.3s) ease;
}

.commission-modernized .document-item:hover {
    border-color: var(--itnj-primary, #1e3a8a);
    box-shadow: var(--itnj-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.commission-modernized .document-item h5 {
    /* Uses --itnj-h5-size from unified heading system */
    margin-bottom: var(--itnj-spacing-xs, 0.25rem);
}

.commission-modernized .document-link {
    display: inline-flex;
    align-items: center;
    gap: var(--itnj-spacing-xs, 0.25rem);
    background: var(--itnj-button-background-color, var(--itnj-primary, #1e3a8a));
    color: var(--itnj-button-text-color, white);
    padding: var(--itnj-spacing-sm, 0.5rem) var(--itnj-spacing-md, 1rem);
    border: var(--itnj-button-border-width, 1px) solid var(--itnj-button-border-color, var(--itnj-primary, #1e3a8a));
    border-radius: var(--itnj-button-border-radius, var(--itnj-border-radius, 8px));
    text-decoration: none;
    font-family: var(--itnj-button-font-family, inherit);
    font-size: var(--itnj-button-font-size, 14px);
    font-weight: var(--itnj-button-font-weight, 500);
    transition: all var(--itnj-transition-speed, 0.3s) ease;
    margin-top: var(--itnj-spacing-sm, 0.5rem);
}

.commission-modernized .document-link:hover {
    background: var(--itnj-button-hover-background-color, var(--itnj-accent, #dc2626));
    color: var(--itnj-button-hover-text-color, white);
    border-color: var(--itnj-button-hover-border-color, var(--itnj-accent, #dc2626));
    transform: var(--itnj-button-hover-transform, translateY(-1px));
}

/* Commission Template Responsive Design */
@media (max-width: 768px) {
    .commission-modernized .commission-header {
        padding: var(--itnj-spacing-md, 1rem);
    }
    
    .commission-modernized .commission-meta {
        flex-direction: column;
        gap: var(--itnj-spacing-sm, 0.5rem);
    }
    
    .commission-modernized .entry-content section {
        padding: var(--itnj-spacing-md, 1rem);
    }
    
    /* Headings automatically use mobile sizes from --itnj-h*-size-mobile */
}

/* ==========================================================================
   Testimony Template - Default Variant Layout Fixes
   ========================================================================== */

/* CONSISTENCY: Match commission page styling */
.testimony-single .testimony-header.entry-header {
    margin-bottom: var(--itnj-spacing-lg, 20px) !important;
}

.testimony-single .entry-title {
    margin-bottom: var(--itnj-spacing-sm, 10px) !important;
}

.testimony-subheading {
    margin-bottom: var(--itnj-spacing-md, 15px) !important;
}

.testimony-meta {
    margin-bottom: var(--itnj-spacing-lg, 20px) !important;
}